gPages JS

Is a version Component building with ES6

New Features

27/01/2017 - New properties in options configuration object. "pagesPrevView" : Number Define items show to prev active item in paginator. "pagesNextView" : Number Define items show to next active item in paginator. "classContainerPage" : String Define custom css class for each containerPage.

Options

Object options has multiple options of configuration

Option | Description ---------------------------------| ------------------------------- item | String Is the selector element itemsPerPage | Number Define quantity items for to show in for each gPage classContainerPage | String Define custom css class for each containerPage. prevText | String Define custom text in prev element in paginator. If is empty not appear nothing nextText | String Define custom text in next element in paginator. If is empty not appear nothing prevSrc | String Define custom src in prev element in paginator. This src will appear on a tag < img > nextSrc | String Define custom src in next element in paginator. This src will appear on a tag < img > loader | String Define a loader from to this list loders pagesPrevView | Number Define items show to prev active item in paginator. pagesNextView | Number Define items show to next active item in paginator. pageChange | Event Is a callback function is ocurred will a page is changed

Examples code

This is a example defiintion options configurations, for initialize gPagesJS:

// options of configuration for pagination
let pagination = new gPages( '#element', 
    {
        item: '.element',
        itemsPerPage: 5,
        loader: 'dots',
        prevText: '',
        prevSrc: '/images/icons/arrow_pagination.svg',
        nextText: '',
        nextSrc: '/images/icons/arrow_pagination.svg',
        pagesPrevView: itemsInPagination,
        pagesNextView: itemsInPagination,
        pageChange: function () {
            alert('Page is changed!');
        }
    }
);

Table of contents