jQuery simplePagination demo

by lakshmipriya001

HTML

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script src="https://cdn.rawgit.com/ddenhartog/jquery-simple-pagination/master/jquery-simple-pagination-plugin.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
<div id="container">
    <div class="my-navigation">
        <!--<div class="simple-pagination-first"></div>-->
        <div class="nav-wrap">
            <div class="simple-pagination-previous"></div>
            <div class="simple-pagination-page-numbers"></div>
            <div class="simple-pagination-next"></div>
            <!--<div class="simple-pagination-last"></div>--></div>
    </div>
    <ul class="gallery">
        <li>
            <img src="http://farm8.staticflickr.com/7404/12868632153_b0a5718c22_m.jpg" alt="" />
        </li>
        <li>
            <img src="http://farm6.staticflickr.com/5584/15276294205_5a7ffe793c_m.jpg" alt="" />
        </li>
        <li>
            <img src="http://farm8.staticflickr.com/7412/8732133694_0c7e400022_m.jpg" alt="" />
        </li>
        <li>
            <img src="http://farm3.staticflickr.com/2870/8985207189_01ea27882d_m.jpg" alt="" />
        </li>
        <li>
            <img src="http://lorempixel.com/240/160/sports/1/" alt="" />
        </li>
        <li>
            <img src="http://lorempixel.com/240/160/sports/2/" alt="" />
        </li>
        <li>
            <img src="http://lorempixel.com/240/160/sports/3/" alt="" />
        </li>
        <li>
            <img src="http://lorempixel.com/240/160/sports/4/" alt="" />
        </li>
        <li>
            <img src="http://lorempixel.com/240/160/sports/5/" alt="" />
        </li>
    </ul>
    <!-- not needed here <div class="simple-pagination-page-x-of-x"></div>
    <div...

JavaScript

$(document).ready(function () {
    var $pagination = $('#container').simplePagination({
        previous_content: '<i class="fa fa-arrow-left"></i>', //e.g. '<'
        next_content: '<i class="fa fa-arrow-right"></i>', //e.g. '>'
        number_of_visible_page_numbers: 6,
        items_per_page: 1,
        pagination_container: 'ul',
        html_prefix: 'simple-pagination',
        navigation_element: 'a', //button, span, div, et cetera
    });

});