$(function(){ var element = $('#slide-container').sliding({ items: 3, target: '#target', disabledClass: 'disabled', url: '/echo/html/', params: { html: "<li>ajax item</li><li>ajax item 2</li><li>ajax item3</li>", delay: 3 }, type: "POST", beforeAjax: function() { $('#loading').text('loading'); }, finish: function() { $('#loading').text('complete'); }, onAppend: function(data) { // you can change the ajax return and return return data; } }); element.sliding("setTotalPages", 3); var currentPage = element.sliding("getCurrentPage"); $('#current-page').html(currentPage); });
<script type="text/javascript" src="https://raw.github.com/alexanmtz/sliding/master/jquery.easing.1.3.js"></script> <script type="text/javascript" src="https://raw.github.com/alexanmtz/sliding/master/jquery.scrollTo-1.4.2.js"></script> <script type="text/javascript" src="https://raw.github.com/alexanmtz/sliding/master/jquery.sliding.js"></script> <div id="slide-container"> <ul> <li>item 01</li> <li>item 02</li> <li>item 03</li> </ul> </div> <div id="target"></div> <div id="current-page"></div> <div id="loading"></div>
#slide-container { border: 1px solid gray; overflow: hidden; } .disabled { color: gray; } ul li { float: left; }