Scroll to Top

Pagination

This plugin will automatically devide your content divs and users will be able to paginate through your content.

SITEMAP Documentation / Js Plugins / Pagination

Demo

Post 01

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Post 02

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Post 03

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Post 04

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Post 05

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Post 06

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code copy

<div class="pager">
    <div class="row grey3 padY-20 padX-10">
        <div class="col m4 l4 s12 post">
            <div class="pad-10">
                <h3 class="text-grey8 padB-10 text-center">Post 01</h3>
                <img src="10.png" class="img img-responsive">
                <p class="text-justify text-grey7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
        <div class="col m4 l4 s12 post">
            <div class="pad-10">
                <h3 class="text-grey8 padB-10 text-center">Post 02</h3>
                <img src="12.png" class="img img-responsive">
                <p class="text-justify text-grey7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
        <div class="col m4 l4 s12 post">
            <div class="pad-10">
                <h3 class="text-grey8 padB-10 text-center">Post 03</h3>
                <img src="17.png" class="img img-responsive">
                <p class="text-justify text-grey7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
        <div class="col m4 l4 s12 post">
            <div class="pad-10">
                <h3 class="text-grey8 padB-10 text-center">Post 04</h3>
                <img src="11.png" class="img img-responsive">
                <p class="text-justify text-grey7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
        <div class="col m4 l4 s12 post">
            <div class="pad-10">
                <h3 class="text-grey8 padB-10 text-center">Post 05</h3>
                <img src="16.png" class="img img-responsive">
                <p class="text-justify text-grey7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
        <div class="col m4 l4 s12 post">
            <div class="pad-10">
                <h3 class="text-grey8 padB-10 text-center">Post 06</h3>
                <img src="18.png" class="img img-responsive">
                <p class="text-justify text-grey7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
</div>
<!--Initialize The Plugin-->
<script>
    $(".pager").pagination({
        itemstopaginate: ".post",
        itemsPerPage: 3,
        paginationstyle: "top",
        listBackColor: "#FFC107",
        listItembgCOlor: "#fafafa",
        listItemCOlor: "#212121",
        listSelectionbgColor: "#4CAF50",
        listSelectionColor: "#fafafa",
        listPadding: "5px 15px",
        listMargin: "0px 5px"
    });

</script>

pagination customization options.

Demo

variable default data-type options function
itemsPerPage 5 numeric number number of items per page
itemstopaginate .paginateMe string class, id, element item identifier => to be paginated.
listBackColor #212121 string Hex Or rgb, rgba backgound of pagination bar.
listItembgCOlor #e0e0e0 string Hex Or rgb, rgba background color of the page number button.
listItemCOlor #212121 string Hex Or rgb, rgba text color of page number in pagination
listSelectionbgColor #2962ff string Hex Or rgb, rgba page selected number background color.
listSelectionColor #fff string Hex Or rgb, rgba page selected number text color.
listPadding 5px 10px string padding in pixels padding of the list
listMargin 5px string margin in pixels margin for the list
paginationstyle bottom string top, bottom or both position of the page number bar.

Code copy

<script>
        $(".pager").pagination({itemstopaginate: ".post", itemsPerPage: 3, paginationstyle: "top"}); 
</script>

Feedback