How to make use of it:

1. Load the purePajinate’s JavaScript in your HTML document.

<script src="js/purePajinate.es5.min.js"></script>

2. Insert the pagination container into your web page.

<div class="example">
  <div class="items">
    <div class="item item1">
      <div class="title">Slide 1</div>
    </div>
    <div class="item item2">
      <div class="title">Slide 2</div>
    </div>
    <div class="item item3">
      <div class="title">Slide 3</div>
    </div>
    <div class="item item4">
      <div class="title">Slide 4</div>
    </div>
    <div class="item item5">
      <div class="title">Slide 5</div>
    </div>
    <div class="item item6">
      <div class="title">Slide 6</div>
    </div>
  </div>
  <div class="page_navigation"></div>
</div>

3. Initialize the pagination library on the parent container and decide what number of objects per web page.

var myPagination = new purePajinate({
    itemsPerPage: 5
});

4. Apply your individual CSS styles to the pagination controls.

.page_navigation { 
  /* your styles here */
}
.page_navigation ul { 
  /* your styles here */
}
.page_navigation li { 
  /* your styles here */
}
.page_navigation li.active_page { 
  /* your styles here */
}

5. Navigate to the primary web page once you click on the Next button on the web page.

new purePajinate({
    wrapAround: true
});

6. Specify the variety of pagination links to show.

new purePajinate({
    pageLinksToDisplay: 5
});

7. Set the preliminary web page on the web page load.

new purePajinate({
    startPage: 1
});

8. Determine the pagination on small devices.

new purePajinate({
    hideOnSmall: true
});

9. Customize the pagination controls with the next options.

new purePajinate({
    navLabelFirst: 'First',
    navLabelPrev: 'Prev',
    navLabelNext: 'Next',
    navLabelLast: 'Last',
    navOrder: ["first", "prev", "num", "next", "last"],
    showFirstLast: false,
    showPrevNext: true
});

10. Default selectors and classes.

new purePajinate({
    containerSelector: '.items',
    itemSelector: '.item',
    navigationSelector: '.page_navigation',
    defaultClass: '',
    activeClass: "active",
    disabledClass: "disabled"
});

11. Callback capabilities.

new purePajinate({
    onInit: function onInit() { },
    onPageDisplayed: function onPageDisplayed() { }
});

Read More: Simple Pagination Plugin with Radio Input