Home » %%sitename%% » Try Code for Unordered list (ul li) pagination

Try Code for Unordered list (ul li) pagination

Code

.my-navigation {
                text-align: center;
            }

.nav-wrap {
                padding-top: 0.5em;
                margin: 0px auto;
            }

.simple-pagination-page-numbers a {
                width: 2rem;
                padding: 0.5em;
                text-align: center;
            }

.simple-pagination-page-numbers {}

.simple-pagination-previous,
            .simple-pagination-next {
                padding-bottom: 0.5em;
            }
        </style> <div id="paginating_div"> <div> <div> <h4>Pagination of unordered list Using js</h4> </div> </div> <div> <div> <ul class="gallery_inne"> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> <li>Lorem ipsum dolar ipsum</li> </ul> </div> </div> <div class="my-navigation"> <div class="simple-pagination-first"></div> <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> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="cwvpsbdelayedscript" defer></script> <script type="cwvpsbdelayedscript" src="https://cdn.rawgit.com/ddenhartog/jquery-simple-pagination/master/jquery-simple-pagination-plugin.js" data-cwvpsb-type="text/javascript" defer></script> <script type="cwvpsbdelayedscript" data-cwvpsb-type="text/javascript">
jQuery(document).ready(function() {
jQuery('#paginating_div').simplePagination({
items_per_page: 6,
pagination_container: '.gallery_inne',
items_per_page_content: {
'Six': 6,
'Eleven': 11,
'Seventeen': 17,
'Thirty-three': 33,
'Sixty-seven': 67
}
});
});
</script>

Try Code for Unordered list (ul li) pagination

Code

Result

Ads Blocker Detected!!!