<div class="demo-wrap">
<div id="demo-content-container"> 
<div class="demo-content">prīmus</div>
<div class="demo-content">secundus</div> 
<div class="demo-content">tertius</div>
<div class="demo-content">quārtus</div>
<div class="demo-content">quīntus</div>
<div class="demo-content">sextus</div>
<div class="demo-content">septimus</div>
<div class="demo-content">octāvus</div>
<div class="demo-content">nōnus</div>
<div class="demo-content">decimus</div>
<div class="demo-content">ūndecimus</div>
<div class="demo-content">duodecimus</div>
<div class="demo-content">tertius decimus</div>
<div class="demo-content">quārtus decimus</div>
<div class="demo-content">quīntus decimus</div>
<div class="demo-content">sextus decimus</div>
<div class="demo-content">septimus decimus</div>
<div class="demo-content">duodēvīcēsimus</div>
<div class="demo-content">ūndēvīcēsimus</div>
<div class="demo-content">vīcēsimus</div>
<div class="demo-content">vīcēsimus prīmus</div>
<div class="demo-content">vīcēsimus secundus</div>
</div> 
<div class="demo-pagination-container"> 
<div class="container pagination justify-content-center"></div> 
</div> 
</div>

.demo-wrap {
  margin: 0 auto;
  max-width: 640px;
  padding: 4em 0;
}

.demo-content {
  font-size: 2.4em;
  padding: 20px 0;
  text-align: center;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
}

.demo-pagination-container {
  margin-top: 2em;
}

.demo-pagination-container 
.pagination a,
.demo-pagination-container 
.pagination a:focus {
  outline: none;
  box-shadow: none;
}

.demo-pagination-container 
.pagination-outer {
  text-align: center;
}

.demo-pagination-container 
.pagination {
  font-family: 'Poppins', sans-serif;
  display: inline-flex;
  position: relative;
}

.demo-pagination-container 
.pagination li a.page-link {
  color: #555;
  background: #eee;
  font-weight: 500;
  line-height: 40px;
  height: 40px;
  width: 40px;
  padding: 0;
  margin: 0 4px;
  border: none;
  border-radius: 0;
  position: relative;
  z-index: 1;
  text-align: center;
}

.demo-pagination-container 
.pagination li a.page-link:hover,
.demo-pagination-container 
.pagination li a.page-link:focus,
.demo-pagination-container 
.pagination li.active a.page-link:hover,
.demo-pagination-container 
.pagination li.active a.page-link {
  color: #fff;
  background: #256596;
}
.demo-pagination-container 
.pagination li a.page-link:before,
.demo-pagination-container 
.pagination li a.page-link:after {
  content: '';
  background-color: #256596;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  transform: scale(0);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

@media only screen and (max-width: 480px) {
.demo-pagination-container 
.pagination {
  font-size: 0;
  display: inline-block;
}
.demo-pagination-container 
.pagination li {
  display: inline-block;
  vertical-align: top;
  margin: 10px 0;
}

}

function getPagesList(pagesTotal, pagesItems, pagesMaxLength) {
if (pagesMaxLength < 5) throw "Length must be higher than 5 pages";
function range(start, end) {
return Array.from(Array(end - start + 1), (_, i) => i + start);
}
var sideWidth = pagesMaxLength < 9 ? 1 : 2;
var leftWidth = (pagesMaxLength - sideWidth * 2 - 3) >> 1;
var rightWidth = (pagesMaxLength - sideWidth * 2 - 2) >> 1;
if (pagesTotal <= pagesMaxLength) {
return range(1, pagesTotal);
}
if (pagesItems <= pagesMaxLength - sideWidth - 1 - rightWidth) {
return range(1, pagesMaxLength - sideWidth - 1)
.concat(0, range(pagesTotal - sideWidth + 1, pagesTotal));
}
if (pagesItems >= pagesTotal - sideWidth - 1 - rightWidth) {
return range(1, sideWidth)
.concat(0, range(pagesTotal - sideWidth - 1 - rightWidth - leftWidth, pagesTotal));
}
return range(1, sideWidth)
.concat(0, range(pagesItems - leftWidth, pagesItems + rightWidth),
0, range(pagesTotal - sideWidth + 1, pagesTotal));
}
$(function() {
var pagesLength = $("#demo-content-container .demo-content").length;
var pagesLimit = 1;
var pagesTotal = Math.ceil(pagesLength / pagesLimit);
var pagesPaginationLength = 9;
var pagesCurrent;
function pageShow(pageWhich) {
if (pageWhich < 1 || pageWhich > pagesTotal) return false;
pagesCurrent = pageWhich;
$("#demo-content-container .demo-content").hide()
.slice((pagesCurrent - 1) * pagesLimit,
pagesCurrent * pagesLimit).show();
$(".pagination li").slice(1, -1).remove();
getPagesList(pagesTotal, pagesCurrent, pagesPaginationLength).forEach(item => {
$("<li>").addClass("page-item")
.addClass(item ? "current-item" : "disabled")
.toggleClass("active", item === pagesCurrent).append(
$("<a>").addClass("page-link").attr({
href: "javascript:void(0)"
}).text(item || "...")
).insertBefore("#next-page");
});
$("#previous-page").toggleClass("disabled", pagesCurrent === 1);
$("#next-page").toggleClass("disabled", pagesCurrent === pagesTotal);
return true;
}
$(".pagination").append(
$("<li>").addClass("page-item").attr({
id: "previous-page"
}).append(
$("<a>").addClass("page-link").attr({
href: "javascript:void(0)"
}).text("«")
),
$("<li>").addClass("page-item").attr({
id: "next-page"
}).append(
$("<a>").addClass("page-link").attr({
href: "javascript:void(0)"
}).text("»")
)
);
$("#demo-content-container").show();
pageShow(1);
$(document).on("click", ".pagination li.current-item:not(.active)", function() {
return pageShow(+$(this).text());
});
$("#next-page").on("click", function() {
return pageShow(pagesCurrent + 1);
});
// keyboard navigation ->:
$(document).keydown(function(e) {
if (e.which == 39) {
return pageShow(pagesCurrent + 1);
}
});
$("#previous-page").on("click", function() {
return pageShow(pagesCurrent - 1);
});
// keyboard navigation <- : 
$(document).keydown(function(e) {
if (e.which == 37) {
return pageShow(pagesCurrent - 1);
}
});
});