make pagination in papaya dicom viewer slices using javascript

i'm using papaya API from github

In this papaya dicom viewer, I want to integrate few things.

One is pagination. if i try to edit this API, I'm getting error

What i want:-

1. In the papaya viewer NEXT, PREV is working fine but I want to make On click to FIRST and the LAST slice moving.
2. And also the pagination will be 1,2,3,4...If click ONE first slice should appear.

Advance thanks

After download Papaya medical research image viewer, choose to work test folder file, So that you can understand how papaya Dicom viewer working.

Step 1:-

In the js folder open constants.js file and create the constants

var MOVE_TO_FIRST_SLICE = "move-to-first-slice",
    MOVE_TO_LAST_SLICE = "move-to-last-slice";
    PAGINATION_LIST = "pagination-list";

Step2:-

Now open the viewer.js, create this on click functions FIRST, LAST and 1,2,3... slices(data-value).

    $(this.container.containerHtml.find("#" + MOVE_TO_FIRST_SLICE + this.container.containerIndex)).click(function () {
        viewer.firstLastSlice(false);
    });

    $(this.container.containerHtml.find("#" + MOVE_TO_LAST_SLICE + this.container.containerIndex)).click(function () {
        viewer.firstLastSlice(true)
    });

    $(this.container.containerHtml.find("." + PAGINATION_LIST + this.container.containerIndex)).click(function () {
        var id = $(this).data('value');
        viewer.pagination(id);
    });

Step 3:- And open the main.js and create the elements

papaya.Container.fillContainerHTML = function (containerHTML, isDefault, params, replaceIndex) {

containerHTML.append("<button type='button' id='"+ (MOVE_TO_FIRST_SLICE + index) + "' class='" + MOVE_TO_FIRST_SLICE + "'>First</button> ");
containerHTML.append("<button type='button' id='"+ (PAPAYA_CONTROL_MAIN_INCREMENT_BUTTON_CSS + index) + "' class='" + PAPAYA_CONTROL_MAIN_INCREMENT_BUTTON_CSS + "'><</button> ");

                var max = 23;
                var slice;
                for(slice=1; slice<=max; slice++){
containerHTML.append("<button id='"+ (PAGINATION_LIST + index) +"' class='"+ (PAGINATION_LIST + index) + "' data-value='" + slice + "'  OnClick(" + slice +") >" + slice + "</button>");
                    }

containerHTML.append("<button id='"+ (PAPAYA_CONTROL_MAIN_DECREMENT_BUTTON_CSS + index) + "' class='" + PAPAYA_CONTROL_MAIN_DECREMENT_BUTTON_CSS + "'>></button> ");              
                containerHTML.append("<button type='button' id='"+ (MOVE_TO_LAST_SLICE + index) + "' class='" + MOVE_TO_LAST_SLICE + "'>Last</button> ");
               containerHTML.append("<button type='button' id='"+ (GET_MAX_VALUE + index) + "' class='" + GET_MAX_VALUE + index + "'>TesT</button> ");
}

Step4:-

The below functions are important to move slices viewer.js

//pagination 1,2,3
papaya.viewer.Viewer.prototype.pagination = function (id, paginationList) {
    var max =  this.volume.header.imageDimensions.zDim;
    //console.log(id);
    this.currentCoord.z = id;
    this.gotoCoordinate(this.currentCoord);

   };

// firstLastSlice
papaya.viewer.Viewer.prototype.firstLastSlice = function (flSlice, degree) {
    var max = this.volume.header.imageDimensions.zDim;
    if (degree === undefined) {
        degree = 0; 
    }

    if (flSlice) {
        this.currentCoord.z = max;
    } else {
        this.currentCoord.z = 0;
    }

    this.gotoCoordinate(this.currentCoord);
};

Explanation

1. viewer.js calculated total slices this.volume.header.imageDimensions.zDim; and stored the total count in Max variable. If the this.currentCoord.z = max; It will go to last slice else, If the this.currentCoord.z = 0; It will move to first slice.
2. In pagination on click to passed data-value to viewer.js pagination function and if this.currentCoord.z = id(id <=> data-value ) It will move to particular slice.

After click using this function this.gotoCoordinate(this.currentCoord); the slice will move.