[javascript] loopedSlider

loopedSlider

https://github.com/nathansearles/loopedSlider
http://slidesjs.com/

loopedSlider 0.5.7 – No longer in development

Check out the next version of loopedSlider, now called Slides https://github.com/nathansearles/Slides

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

Check out the next version of loopedSlider, now called Slides http://slidesjs.com

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

Complete instructions can be found at http://nathansearles.com/plugin/loopedslider/

For updates, follow Nathan Searles on Twitter

Examples

• Simple example using images, DIVs and auto generated pagination
• 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>
</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>

Defaults

container: ".container", //Class/id of main container. You can use "#container" for an id.
slides: ".slides", //Class/id of slide container. You can use "#slides" for an id.
pagination: "pagination", //Class name of parent ul for numbered links. Don't add a "." here.
containerClick: true, //Click slider to goto next slide? true/false
autoStart: 0, //Set to positive number for true. This number will be the time between transitions.
restart: 0, //Set to positive number for true. Sets time until autoStart is restarted.
hoverPause: false, //Set to true to pause on hover, if autoStart is also true
slidespeed: 300, //Speed of slide animation, 1000 = 1second.
fadespeed: 200, //Speed of fade animation, 1000 = 1second.
autoHeight: 0, //Set to positive number for true. This number will be the speed of the animation.
addPagination: false //Add pagination links based on content? true/false

Defining Local Defaults

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

Defining Global Defaults

<script type="text/javascript" charset="utf-8">
        $(function(){
			$.fn.loopedSlider.defaults.addPagination = true;
			$.fn.loopedSlider.defaults.slidespeed = 500;
        });
</script>