a complete jQuery UI plugin for smart carousels

You can check a tutorial in my blog post about the plugin



  • Download the source code
  • in a list of itens, just use $('seletor').sliding();

When should I use

This plugin is a non cycle carousel, used for navigation in a subset of elements, like video set, picture set, news etc.

With you wanna a cycle and unique carousel with a built in paralax effect, please check The destaque plugin

Basic Usage


    <div id="sliding-content">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>




Simple sliding horizontal

            mode: 'horizontal',
            items: 3,
            target: '.ui-sliding-navigation'





You can download this project in either zip or tar formats.

You can also clone the project with Git by running:

$ git clone git://github.com/alexanmtz/sliding

How to display current pages


Current page: ?

How to display total pages


Total Pages: ?

Live example code



Ajax example

Configuration options

Option name Default Description
items 5 The amont of itens to display
columns null For more complex sliding, you can use columns too
item 'li' A String with a jQuery selector. This element is relative to sliding element
target false A target element to handle pagination, when set to false, you will manually set next and prev to specify the right navigation handlers
wrapper 'ul' Usually a sliding is a div outemost container, a unordered list and youre done, but you can use other types setting a jquery element here
previous '.ui-sliding-previous-link' A jQuery selector that correspond the previous buttom
next '.ui-sliding-next-link' A jQuery selector that correspond the previous buttom
pager false A dom element that will append a numbered navigation
disabledClass '.ui-state-disabled' The class name that will be applied wihen the button is disabled, at first page and last page
url null This activate the remote sliding, specifying a url the content will be loaded via ajax.
urlFormat null You can use dinamic pages, like '{url}/page/{page}', where page will be the current page, so the url will call 'example/page/2' when second page is calling
speed 1000 A number in miliseconds to adjust the transition speed
easing 'easeInOutQuad' When the jQuery easing plugin is available, use a easing method to animate
autoHeight false When set to true, the plugin will adjust automatically the height if the itens have different sizes
params empty object A literal object when is possible to send additional parameters in ajax request with remote sliding turned on (setting the url option)
currentPage 1 It's possible to start in any page
onAppend Function This callback is a way to change the ajax response, this way you can return directly the html


Method name Parameters Description
navClicked function(clickedButton, currentPage){} When the navigation button is clicked
before function(){} before a transition start
beforeAjax function(){} When a ajax request is ready to be made
nextRemote function(data){} A pagination of a remote sliding at progress
navClicked function(clickedButton, currentPage){} When the navigation button is clicked
goToPage $('element').sliding('goToPage', page) Go directly to a page. Useful for build ordered navigation
refresh $('element').sliding('refresh') Force a refresh and update navigation itens and update total pages
restart $('element').sliding('restart') Restart the navigation, going to the first page
setTotalPages $('element').sliding('setTotalPages', pages) When using remote sliding, you can set manually the totalPages that usually came from ajax
getTotalPages $('element').sliding('getTotalPages') Get the total pages for display in your interface
getCurrentPage $('element').sliding('getCurrentPage') return the current page