loopedSlider 0.5.1 – 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

Examples

• Simple example using images and DIVs
• Simple text and auto height example using LIs
• Multiple sliders and auto play example
• Fancy 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>

Changelog

• 0.5.1 – Fixed minor bug, container option not properly set
• 0.5 – Initial release