Simply code to paginate one by one ul li list with fade effect and round buttons.

$(‘#container’).paginate();

Make sure to define width/height of your container in your stylesheet.

<style type=“text/css”> ul, li { padding: 0px; list-style: none; } #container { width: 240px; height: 170px; } </style>

<script type=“text/javascript”> $(document).ready(function() { $(‘#container’).paginate(); }); </script>

<div id=“container”> <ul> <li><img src=“img/img1.png”></li> <li><img src=“img/img2.png”></li> <li><img src=“img/img3.png”></li> <li><img src=“img/img4.png”></li> <li>…</li> </ul> </div>

vertical: false, durationFade: 1000, durationDelay: 5000, tagContainer: ‘ul’, tagItem: ‘li’, buttonContainer: ‘paginate-buttons’, buttonSize: ‘10px’, buttonBorderColor: ‘#FFF’, buttonBackgroundColor: ‘#FFF’, buttonMargin: ‘2px’

Samuel JOCHIMEK: @samjoch