a complete jQuery UI plugin for smart carousels
You can check a tutorial in my blog post about the plugin
Dependencies
- This plugins uses the scrollTo by Ariel Flesler:
Install
- 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
Markup
<div id="sliding-content">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</div>
Code
$('#sliding-content').sliding();
Examples
Simple sliding horizontal
$('.sliding-horizontal').sliding({
mode: 'horizontal',
items: 3,
target: '.ui-sliding-navigation'
});
License
MIT
Authors
- Alexandre Magno (@alexanmtz)
- Túlio Ornelas (@tulios)
- Emerson Macedo (@emerleite)
- Daniel Martins (@danielfm)
Download
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
Example
A live example. In this page you can initialize the plugin with custom options and see live results by clicking at 'apply sliding'Live example code
js
html
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 |
Methods
| 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 |