loopedSlider 0.5.4 – jQuery plugin

loopedSlider is a plugin made for jQuery that solves a simple problem, the looping of slide content. It was created to be easy to implement, smooth and most of all end the “content rewind” that most other content sliders suffer from.

Info

Developed by Nathan Searles, http://nathansearles.com

For updates, follow Nathan Searles on Twitter

Examples

• Simple example using images and DIVs
• Simple text and auto height example using LIs
• Multiple sliders and auto play with auto restart
• Styled example

Markup

<div id="loopedSlider">
        <div class="container">
                <div class="slides">
                        <div><img src="01.jpg" alt="" /></div>
                        <div><img src="02.jpg" alt="" /></div>
                        <div><img src="03.jpg" alt="" /></div>
                        <div><img src="04.jpg" alt="" /></div>
                </div>
        </div>
        <a href="#" class="previous">previous</a>
        <a href="#" class="next">next</a>
        <ul class="pagination">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
        </ul>  
</div>

CSS

.container { width:500px; height:375px; overflow:hidden; position:relative; cursor:pointer; }
.slides { position:absolute; top:0; left:0; }
.slides div { position:absolute; top:0; width:500px; display:none; }

Initialize

<script type="text/javascript" charset="utf-8">
        $(function(){
                $('#loopedSlider').loopedSlider();
        });
</script>

Options

container: '.container', // Class or ID of main container
slides: '.slides', // Class or ID of slide container
pagination: '.pagination', // Class or ID of pagination container
containerClick: true, // Click container for next slide
autoStart: 0, // Set to positive number for auto start and interval time
restart: 0, // Set to positive number for restart and restart interval
slidespeed: 300, // Speed of slide animation
fadespeed: 300, // Speed of fade animation
autoHeight: false // Set to positive number for auto height and animation speed

Changelog

• 0.5.4 – Fixed bug if slider has less then 3 slides
• 0.5.3 – Minor bug fix related to auto restart
• 0.5.2 – Added restart of auto start after it’s been stopped
• 0.5.1 – Fixed minor bug, container option not properly set
• 0.5 – Initial release