Pagination Example

pagination.md

JS:

/* -- Pagination -- */
var currPage = 1;
var numsPerPage = 6;

$(document).ready(function(){
    $("div.content-single").hide();
    $("div.content-single:lt(" + numsPerPage + ")").show();
    var divcount = $("div.content-single").length; 
    var divpages = (divcount == 0 ? 0 : Math.ceil(divcount / numsPerPage)); 

    function showPage(index){
        currPage = index;
        $("div.content-single").hide();
        if (index == 1) return $("div.content-single:lt(" + numsPerPage + ")").fadeIn();

        $("div.content-single").fadeIn();
        var cutElementsFront = numsPerPage * (index - 1);

        $("div.content-single:lt(" + cutElementsFront + ")").hide();
        $("div.content-single:visible:gt(" + (numsPerPage - 1) + ")").hide();
    }

    function prevNext(isNext){
        var tmpIndex = currPage;
        if (isNext){
            ++tmpIndex;
            if (tmpIndex > divpages) return;
        }
        else {
            --tmpIndex;
            if (tmpIndex < 1) return;
        }
        $(".pagination-link").removeClass("is-active");
        $(".pagination ul a li:contains(\"" + tmpIndex + "\")").parent().addClass("is-active");
        showPage(tmpIndex);
    }

    for (var i = 1; i < divpages; i++){
        var index = i;
        ++index;
        $(".pagination-loop").append("<a class=\"pagination-link\" href=\"#\"><li>" + index + "</li></a>");
    }

    $(".pagination-link").on("click", function(e){
        e.preventDefault();
        var index = $(this).find("li").html();
        $(".pagination-link").removeClass("is-active");
        $(this).addClass("is-active");
        showPage(index);
    });

    $(".pagination-next").on("click", function(e){
        e.preventDefault();
        prevNext(true); 
    });

    $(".pagination-prev").on("click", function(e){
        e.preventDefault();
        prevNext(false);
    });
});
/* -- Pagination End -- */

---

HTML:

<div class="wrap">
    <div class="content-wrapper">
        <div class="content-single">
        
        </div>
    </div>
    <div class="container">
        <div class="pagination p1">
            <ul>
                <a class="pagination-prev" href="#"><li><</li></a>
                <a class="is-active pagination-link" href="#"><li>1</li></a>
                <div class="pagination-loop">
                </div>
                <a class="pagination-next" href="#"><li>></li></a>
            </ul>
        </div>
    </div>
</div>

---

CSS:

.pagination { 
    padding: 30px 0; 
    width: 100%; 
    justify-content: center; 
    display: flex; 
}

.pagination ul { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
}

.pagination a { 
    display: inline-block; 
    padding: 10px 18px; 
    text-decoration: none; 
    color: #222; 
}

.p1 a { 
    width: 40px; 
    height: 40px; 
    line-height: 40px; 
    padding: 0; 
    text-align: center; 
    color: #fff; 
}

.p1 a.is-active { 
    background-color: #fba091; 
    border-radius: 100%; 
    color: #fff; 
}

.pagination-loop { display: inline; }

---

DEMO: https://jsfiddle.net/3Lm4sd0q/