jQuery Looped Slider Tutorial
2009 June 18
Today we’re going to use Nathan Searles’ jQuery loopedSlider, 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.
This is going to be a quick and easy tutorial. You can just copy and paste the code and have yourself a looping slider in minutes. You can view a working demo and feel free to download the complete source files.
Markup
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>loopedSlider jQuery Plugin</title> <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="loopedslider.js" type="text/javascript" charset="utf-8"></script> <style type="text/css" media="screen"> </style> </head> <body> <div id="loopedSlider"> <div class="container"> <div class="slides"> <div><img src="image-01.jpg" width="600" height="393" alt="First Image" /></div> <div><img src="image-02.jpg" width="600" height="393" alt="Second Image" /></div> <div><img src="image-03.jpg" width="600" height="393" alt="Third Image" /></div> <div><img src="image-04.jpg" width="600" height="393" alt="Fourth Image" /></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> </body> </html>
Styles (CSS)
/*
* Required
*/
.container { width:600px; height:393px; overflow:hidden; position:relative; cursor:pointer; }
.slides { position:absolute; top:0; left:0; }
.slides div { position:absolute; top:0; width:600px; display:none; }
/*
* Optional
*/
#loopedSlider,#newsSlider { margin:0 auto; width:500px; position:relative; clear:both; }
ul.pagination { list-style:none; padding:0; margin:0; }
ul.pagination li { float:left; }
ul.pagination li a { padding:2px 4px; }
ul.pagination li.active a { background:blue; color:white; }
Power Up The Slider
This time we’re going to initialize the plugin from the bottom section of our document in order to load our content first before the calling our plugin.
<script type="text/javascript" charset="utf-8">
$(function(){
$('#loopedSlider').loopedSlider();
});
</script>
</body>
</html>
Autostart the slider:
<script type="text/javascript" charset="utf-8">
$(function(){
$('#loopedSlider').loopedSlider({
autoStart: 3000
});
});
</script>
</body>
</html>
Initialize multiple sliders:
<script type="text/javascript" charset="utf-8">
$(function(){
$('#loopedSlider').loopedSlider({
autoStart: 3000
});
$('#anotherSlider').loopedSlider({
autoHeight: 400
});
});
</script>
</body>
</html>
View Demo for both autostart and multiple sliders
Conclusion
I really like the simplicity of this plugin and I think I’m going to use this in my future projects. How about you? Have you ever used jQuery loopedSlider before? What other jQuery sliders would you recommend? Thanks for reading.
44 Responses
leave one →
Trackbacks and Pingbacks
- Jquery, looped et slider vont au bal | Orgied.com
- Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance « Technosiastic!
- 25 Very Detailed jQuery Image and Content Slider Tutorials |
- Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance
- Moé Moé Rabu Layout Mark 5 GO!! by Moé Moé Rabu
hi there!
I trying to implement this nice jquery slider into my WP functions.php file. Clould you help me?
Sure Sergio. I also implemented this slider in my homepage and put the javascript calls in my functions file. Do you like that approach?
Sure. I would like to have it in my home page. I don’t speak english very well (i’m from spain) but, basically my doubts are:
- Are there any conflicts with other jquery calls from other plugins in my theme framework?
I understand the main concept and is easy to get it work in plain html, but i make some errors implementing in WP, it becomes more complex. Sintaxis…
Could you share your code for me to understand how it is written in functions file and aply in future projects?
thanks.
This will not get in any conflict with the other plugins.
Actually you can make this work without needing a functions file.
But here’s what I did:
– Create a new page for your loopedslider
– Open up functions file and place this code:
function loopedslider_js()
{
if (is_page(postidhere)) { //If page is custom static homepage ?>
<script language="javascript" src="<?php bloginfo('template_url'); ?>/js/loopedslider.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$('#loopedSlider').loopedSlider({
autoStart: 4000
});
});
</script>
<?php }
}
add_action('wp_head', 'loopedslider_js');
This will check if it’s the page where you want to show the loopedslider so the call won’t show up in every page.
Good luck Sergio
Greatfull! Thanks, I almost finished with it. Only remains a problem with the path “bloginfo” to my images. I use hybrid framework theme.
Hello po!
Sorry if this is a dumb question but I really have zero knowledge in techie stuff such as this. But I am trying to put up a blog in WordPress on my own. I admire your knowledge on these things and the slide you made looks great that I aspire to one like that in front of my blog. My questions are, if I use the source code you have here and change your sample images into my images, will that already work? Do I have to tweak my css file? I would love to have it in my blog but I really don’t know how to integrate it.
Thank you so very much, at magandang araw po.
Hi Nortehanon,
There is no such thing as a dumb question. You do need to tweak the CSS file. You just need to change the width and height of
.containerand the width of.slides divdepending on your image dimensions. Good luck and thanks for the comment.hi-
Curious to know how to get the images to link to outside URLs. Right now, the demo seems to show them working with the pagination (i.e., clicking on one image advances it to the other). I’d like to use the lower nav for pagination, but have the images link elsewhere. Thanks
Hi ed,
I believe you just have to surround the images with anchor tags. You can have a look at my homepage for an example of what you’re saying. Hope that helps. Good luck.
Hi,
I’m trying to make the transitions form one image to another to be faded instead of slide. Can you please tell me what do I need to change in this script.
Thanks
I have autoslide on, and I’m trying to get it to fade instead of slide, as it rolls through the images. Having a very tough time with this.
I have rearranged/added to the ‘next’ function, using snippets from the ‘fade’ function, and i got it to fade, but it won’t advance to the next image. I also got it to fade and advance, but it doesn’t reset when it gets to the end.
Any input is appreciated.
Hi Raymond!
Really good stuff you have here! I was just wondering how to get this to work within a post in wordpress.
What exactly should I put into the custom field?? The header?? And where do I put the *.js files??
I’ve been trying to figure this one out for weeks already! Hahaha! I do get along with HTML and CSS well but JS is just way too complex for me!
Many thanks bro!
Gino
You can see an example of this in my homepage (sliding portfolio images), but I didn’t use custom fields with that. I just created a custom page and assigned that as my homepage. You can just create a folder for JS and then place code in the head section. You can view my source code for the homepage for some ideas.
I hope this helps.
Hi there thanks for the very nice plugin. I have one question, is there any cretin licensing, or restrictions?
For others that might have this question, this is how I got it to fade when it is autoscrolling through the images. Initially this caused it to not start over once it had reached the last slide, but it now functions correctly.
case ‘next’:
t = t+1;
m = (-(t*w-w));
current(t);
if(o.autoHeight){autoHeight(t);}
$(o.slides,obj).children().fadeOut(o.fadespeed, function(){
$(o.slides,obj).css({left: m});
$(o.slides,obj).children(‘:eq(‘+(s-1)+’)').css({left:s*w-w});
$(o.slides,obj).children(‘:eq(0)’).css({left:0});
if (t===s+1) {
t = 1;
m = (-(t*w-w));
current(t);
}
if(t===s){$(o.slides,obj).children(‘:eq(0)’).css({left:(s*w)});}
if(t===s-1){$(o.slides,obj).children(‘:eq(‘+(s-1)+’)').css({ position:’absolute’,left:-w});}
$(o.slides,obj).children().fadeIn(o.fadespeed);
u = false;
});
break;
I didn’t create that plugin. I think I have a link on my article pointing to the author of the plugin.
Hi Raymond,
Thanks for the Tutorial, its awesome!
I have one question,
Its possible to make all transitions with fade?
Thanks!
Eduardo
Thank you for this write-up.
Is there any way to load the banners in a random order?
HI there thanks for the great tutorial but i was wondering if you would remove the clickable nature of the divs so that you could add things inside them such as images and text with multiple links?
Nice one mate. I have also added the link to your post in my Ultimate
collection of top jQuery tutorials, tips-tricks and techniques to improve
performance. Have a check below:
http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-
tutorials-tips-tricks-techniques-to-improve-performance/
How do I make links somewhere else on my site to change the picture order??? The HTML # isnt really working. Been trying to get this to work for hours now…
Hello Raymon,
Im not good yet at JQuery & i find your loopedCarousel
very good… especially per items view.
But it is limited to 6 children.
How can i fix this limited to 3 children?
Can u help … ty
Hi
What should I do if there is only one image in slider? It doesn’t work
Thank you so much for this beautiful plagin! I’ll use it in my future project!
Pre, thanks a bunch! Saved my ass!
Hello,
I love this slider but have a request from a client to have the rewind feature taken out (when it gets to the last slide just stop). I’d like to use this slider but might have to use another if this cannot be achieved. Have any ideas?
Thanks,
Devin
htttp://www.dlocc.com
Hello together,
i try tu use the bxSlider and the loopedslider plugin in a thickbox.
unfortunatelly it doesn’t work correctly inside the thickbox. has anyone an idea what the problem could be? thanks for your help.
manuel
i know this defeats the purpose of this script, but how do i make it not loop? i’ve already customized it to exactly how i want to look and don’t want to change to another script at this point. any help?
Hi
I`m a beginner at this stuff. I`m trying to put a looped slider on my weebler but i can’t figure out how. I’ve been trying for countless hours and it just won`t work… Can you help?
Is there any reason why it would display a blank at the end of the sequence when there are only three images defined in the HTML? This only happens in Safari and IE8 so far.
In all versions of Firefox it’s fine.
Thanks.
Sorry… one more. How can I disable the ability to click on the image? I just want it to scroll without user interaction. Currently, I’m finding that a click will stop the autoscroll. Thanks again.
@Eric: your code works for fading instead of sliding but only for next button. Can you share the code for the left button?
Cheers!
$(function(){
$(‘#loopedSlider’).loopedSlider({
autoStart: 6000,addPagination:true,containerClick:false
});
});
NOW CONTAINER CLICK DOESNOT WORKING
PS.
Raymond, thx for tutorial !!!!
Any idea how you make it change to a certain slide? Ie like pagination but using a different link?
Hi. I am using loopedcarousel, and found a problem. I have gone through the javascript file, but cannot seem to find the problem. The problem is that sometimes, when clicking the previous button, the slider shows up with blank slided. Any ideas please?
Thanking you
Tasneem
Hi,
Thanks for the great tutorial. Does anyone know of a way to add captions to images using this slider?
Thank you!
hi does any one know how to link the images in order when to click it take you to another page or site thank you very much in advanced for your help
If you want to link the images to different URL’s when you click on them you just need to change containerClick:true to containerClick:false. You’ll find this code near the end of the javascript file. After that just wrap the image in an anchor tag and you’re good to go!
Great tut! Thanks!
Has anyone figured out how to use this without a height value on #container? Or to grab the longest entry’s height and use that?