General Information
In the following examples all rotators are created using a div (to wrap the rotator and hide overflow), an unordered list (to act as the rotator) and several child list elements to contain our content.
However, an unordered list is not required to act as the slider. And, the outer wrapper is not required either. You can replace the ul with another div and target it as the rotator. The rotator simlpy grabs the width of the child elements sets rotates through them no matter what elements they are or how many.
It is possible to rotate through more than one child element at a time. Since the rotator is simply grabbing child elements of the container you can use markup like nested lists to display two or more elements at a time and rotate through them.
In order for the rotator to properly adjust it's overall width in order to set the elements inline with each other there must not be any padding or margin applied to the children of the slider. ie: in the below examples there is 0 padding and 0 margin set on the list (li) elements and the width is explicitly set. Also, the li elements are floated left. This method works well in all modern browsers and back to IE7 (sorry IE6 I haven't tested you).
All rotators generate a list of numbers that correspond to the child elements of the rotator. These are hidden easily with css display:none
The rotator can also be controlled by left and right (or forward and backward) buttons. Rotator does not generate these arrows for you. However, it will bind a click event to a left and right classed DOM element. Each rotator envoked will bind the events to elements with the classes .leftarrow(n) and .rightarrow(n) where (n) is the index of the rotator created. In that case the third rotator on this page would have the classes .leftarrow2 and .rightarrow2 bound. You can also pass in custom classes to be bound if this is too confusing.
The rotator does have events and methods not controlled by the options for added extendability. Please read the docs.
There a lot of rotators running on this page which may cause them to not transition properly depending on your browser. For the best demo results (if you are having trouble viewing them) copy and paste the demo code for the one you wish to preview and import the proper javascripts and stylesheets to view.
Beginner
This is the most basic example of the rotator running with no navigation arrows or buttons.
Code: (click to show)
*Notes: All rotators generate a list of numbers that correspond to the child elements of the rotator. These are hidden in this example with css .slider-numbers-0{display:none}
<ul class="slider slider-1">
<li><a href=""><img src="images/chris_farmer_poster_thumb.jpg" alt="" /></a></li>
<li><a href=""><img src="images/decade_of_blade_catalog.jpg" alt="" /></a></li>
<li><a href=""><img src="images/fluxar_business_cards_small.jpg" alt="" /></a></li>
<li><a href=""><img src="images/Kern_Green.jpg" alt="" /></a></li>
<li><a href=""><img src="images/tim_palmer_music_small.jpg" alt="" /></a></li>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".slider-1").rotator();
});
</script>
This is another basic slider with a few of the options set like transition time, display time and direction
Code: (click to show)
*Notes: All rotators generate a list of numbers that correspond to the child elements of the rotator. These are hidden in this example with css .slider-numbers-0{display:none}
<ul class="slider slider-2">
<li><a href=""><img src="images/chris_farmer_poster_thumb.jpg" alt="" /></a></li>
<li><a href=""><img src="images/decade_of_blade_catalog.jpg" alt="" /></a></li>
<li><a href=""><img src="images/fluxar_business_cards_small.jpg" alt="" /></a></li>
<li><a href=""><img src="images/Kern_Green.jpg" alt="" /></a></li>
<li><a href=""><img src="images/tim_palmer_music_small.jpg" alt="" /></a></li>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".slider-2").rotator({
tranSpeed : 300,
delay: 1000,
backwards: true
});
});
</script>
Intermediate
This slider displays a list of clickable numbers to switch images
Code: (click to show)
*Notes: This example is just like the above examples except we've used some css to show the slider-numbers. With some more advanced css we could hide the text and replace the numbers with icons or buttons and float them over the images.
<ul class="slider slider-3">
<li><a href=""><img src="images/chris_farmer_poster_thumb.jpg" alt="" /></a></li>
<li><a href=""><img src="images/decade_of_blade_catalog.jpg" alt="" /></a></li>
<li><a href=""><img src="images/fluxar_business_cards_small.jpg" alt="" /></a></li>
<li><a href=""><img src="images/Kern_Green.jpg" alt="" /></a></li>
<li><a href=""><img src="images/tim_palmer_music_small.jpg" alt="" /></a></li>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".slider-3").rotator({
backwards: true
});
});
</script>
This slider displays a list of clickable numbers to switch images and more than just images inside the list
Code: (click to show)
*Notes: All I've done is add text inside of the list element. I chose to wrap it with the anchor, it could be outside as well.
<ul class="slider slider-3">
<li><a href=""><img src="images/chris_farmer_poster_thumb.jpg" alt="" />Chris Farmer Poster</a></li>
<li><a href=""><img src="images/decade_of_blade_catalog.jpg" alt="" />Decade Of Blade Catalog</a></li>
<li><a href=""><img src="images/fluxar_business_cards_small.jpg" alt="" />Fluxar Business Cards</a></li>
<li><a href=""><img src="images/Kern_Green.jpg" alt="" />Kern Green</a></li>
<li><a href=""><img src="images/tim_palmer_music_small.jpg" alt="" />Tim Palmer Music</a></li>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".slider-4").rotator();
});
</script>
Advanced
PrevNextRestart
Code: (click to show)
*Notes: This slider uses nested lists to display 2 images at a time. Also, with some different markup and css we could display two images at a time but only increment through 1 at a time. I've set all available options of the slider and used the onChange event to update the current slide number in the box above. Also, I've added left and right classes and set anchors above to move the slider to the left or right.
<ul class="slider slider-5">
<ul>
<li><a href=""><img src="images/chris_farmer_poster_thumb.jpg" alt="" /></a></li>
<li><a href=""><img src="images/decade_of_blade_catalog.jpg" alt="" /></a></li>
</ul>
<ul>
<li><a href=""><img src="images/fluxar_business_cards_small.jpg" alt="" /></a></li>
<li><a href=""><img src="images/Kern_Green.jpg" alt="" /></a></li>
</ul>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".slider-5").rotator({
arrows : {left:".leftarrow",right:".rightarrow"},
tranSpeed : 800,
delay : 4000,
auto : true,
loop : true,
backwards : false,
onChange : function(i){$(".curNum span").html(i);},
endChange : function(i){}
});
});
</script>
View the fully styled (Advanced) demo to see what is possible with the rotator!