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>
(0) 
(0)Posted by 홍반장
