textSlider release v0.7 (11.07.2010)
is a fast and full customizable jQuery plugin for sliding html based content on all websites.
live options
show example code
example code
#javascript
<link href="css/default/jquery.textslide.css" rel="stylesheet" type="text/css" media="screen">
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.textslide.js" type="text/javascript"></script>
<script src="js/jquery.textslide.wheel.js" type="text/javascript"></script>
<script src="js/jquery.textslide.auto.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#slider').textSlide ({auto: false, step: 5, slide: 0, slides: 5, wait: 500});
});
</script>
#html
<div id="slider" class="t-slider">
<img src="images/face1.jpg" alt="face 1" title="face 1"/>
<img src="images/face2.jpg" alt="face 2" title="face 2"/>
<img src="images/face1.jpg" alt="face 3" title="face 3"/>
<img src="images/face2.jpg" alt="face 4" title="face 4"/>
<img src="images/face1.jpg" alt="face 5" title="face 5"/>
<img src="images/face2.jpg" alt="face 6" title="face 6"/>
<img src="images/face1.jpg" alt="face 7" title="face 7"/>
<img src="images/face2.jpg" alt="face 8" title="face 8"/>
<img src="images/face1.jpg" alt="face 9" title="face 9"/>
<img src="images/face2.jpg" alt="face 10" title="face 10"/>
<img src="images/face1.jpg" alt="face 11" title="face 11"/>
<img src="images/face2.jpg" alt="face 12" title="face 12"/>
<img src="images/face1.jpg" alt="face 13" title="face 13"/>
<img src="images/face2.jpg" alt="face 14" title="face 14"/>
<img src="images/face1.jpg" alt="face 15" title="face 15"/>
</div>
Features:
- Can slide vertical or horizontal
- Easy customizable
- Minified the size is 2,80 kb
- You can write Your own plugin and animation
- Plugins: autosize, autoslide, mousewheel, breadcrumb/navigation
Standard available options
| slide | 0 | where should the carousel start? |
| slides | 1 | how many blocks do you want to display? |
| step | 1 | how many blocks do you want to move at a time? |
| axis | 'horizontal' : ('horizontal','vertical') | vertical or horizontal scroller? |
| controls | true : (true,false) | show left and right navigation buttons? |
| eventqueue | true : (true,false) | queue for events. |
| previous | {} : (href,title,innerHTML...) | object with attributes of html link previous tag. |
| next | {} : (href,title,innerHTML...) | object with attributes of html link next tag. |
| fx | 'slide' : ('slide','show','fade') | type of animation. |
| fxoption | [1500] | array of options, first param is how fast must the animation move in milliseconds? |
| onSlideEnd | function ($pane, option) {} | function that executes after every move. |
var $slider = $('#slider');
// init slider plugin
$slider.textSlide ({auto: false, step: 5, wait: 500});
Functions
| go(direction) | go to slide ['next', 'previous', integer] |
| destroy() | destroy slider |
var $slider = $('#slider');
// go function to specified slide
$slider.textSlide ('go', 2);
Available options for 'autoslide' extansion
| auto | 'next' : ('next','previous') | move to the next block on interval. |
| wait | 6000 | interval time in milliseconds. |
| onAuto | function (node) {} | function that executes before auto move. |
| onAutoStop | function (node) {} | function that executes after auto move. |
Functions
Download jquery.textslide.auto.js (2kb)
Available options for 'autosize' extansion
| autosize | true : (true,false) | move to the next block on interval. |
Download jquery.textslide.autosize.js (2kb)
Available options and there default value for 'mousewheel' extansion
| wheel | true : (true,false) | move to the next block on interval. |
Download jquery.textslide.wheel.js (2kb)
Available options for 'breadcrumb' extansion
| breadcrumb | true : (true,false) | move to the next block on interval. |
| btitle | 'slide ' | interval time in milliseconds. |
| bcalculate | 'slide ' | interval time in milliseconds. |
Functions
| breadcrumb() | create breadcrumb |
| current(id) | set current slide in breadcrumb
id = Math.ceil (options._nextslide/options.step)*options.step |
Download jquery.textslide.breadcrumb.js (2kb)
