jQuery Looped Slider Tutorial

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.

77 thoughts on “jQuery Looped Slider Tutorial

  1. 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.

  2. 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

  3. Greatfull! Thanks, I almost finished with it. Only remains a problem with the path “bloginfo” to my images. I use hybrid framework theme.

  4. 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.

  5. 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 .container and the width of .slides div depending on your image dimensions. Good luck and thanks for the comment.

  6. 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

  7. 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.

  8. 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

  9. 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.

  10. 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

    1. 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.

  11. 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;

    1. this is my code for autostart fading, not able to fix this.
      Can you please please help on this..
      case “next”:
      times = times+1;
      distance = (-(times*width-width));
      current(times);
      if(o.autoHeight){autoHeight(times);}

      if(slides<3){
      if (times===3)
      {$(o.slides,$t).children(":eq(0)").css(
      {left:(slides*width)});}
      if (times===2)
      {$(o.slides,$t).children(":eq("+(slides-1)+")").css(
      {position:"absolute",left:width});}
      }
      $(o.slides,$t).animate({left: distance}, o.slidespeed,
      function(){
      if (times===slides+1) {
      times = 1;
      $(o.slides,$t).css({left:0},function(){$(o.slides,$t).animate({left:distance})});
      $(o.slides,$t).children(":eq(0)").css({left:0});
      $(o.slides,$t).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});
      }
      if (times===slides)
      $(o.slides,$t).children(":eq(0)").css({left:(slides*width)});
      if (times===slides-1) $(o.slides,$t).children(":eq("+(slides-1)+")").css({left:(slides*width-width)});

      active = false;
      });
      break;

    2. This one is working code with
      Effect: Sliding(right to left) , Autostart: true
      need to help to make this fading autostart.
      case “next”:
      times = times+1;
      distance = (-(times*width-width));
      current(times);
      if(o.autoHeight){autoHeight(times);}

      if(slides<3){
      if (times===3)
      {$(o.slides,$t).children(":eq(0)").css(
      {left:(slides*width)});}
      if (times===2)
      {$(o.slides,$t).children(":eq("+(slides-1)+")").css(
      {position:"absolute",left:width});}
      }
      $(o.slides,$t).animate({left: distance}, o.slidespeed,
      function(){
      if (times===slides+1) {
      times = 1;
      $(o.slides,$t).css({left:0},function(){$(o.slides,$t).animate({left:distance})});
      $(o.slides,$t).children(":eq(0)").css({left:0});
      $(o.slides,$t).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});
      }
      if (times===slides)
      $(o.slides,$t).children(":eq(0)").css({left:(slides*width)});
      if (times===slides-1) $(o.slides,$t).children(":eq("+(slides-1)+")").css({left:(slides*width-width)});

      active = false;

      1. Done with it myself… here is my code.

        case “next”:
        times = times+1;
        distance = (-(times*width-width));
        current(times-1);

        if(o.autoHeight){autoHeight(times);}

        if(slides<4){
        if (times===4){$(o.slides,$t).children(":eq(0)").css
        ({left:(slides*width)});}
        if (times===3){$(o.slides,$t).children(":eq("+(slides-1)+")").css
        ({position:"absolute",left:width});}
        if (times===2){$(o.slides,$t).children(":eq("+(slides-1)+")").css
        ({position:"absolute",left:width});}
        }

        $(o.slides,$t).children().fadeOut(o.fadespeed, function(){
        $(o.slides,$t).css({left: distance});
        $(o.slides,$t).children(":eq("+(slides-1)+")").css
        ({left:slides*width-width});
        $(o.slides,$t).children(":eq(0)").css
        ({left:0});
        if (times===slides+1) {
        times = 1;
        distance = (-(times*width-width));
        current(times);}
        if(times===slides){$(o.slides,$t).children(":eq(0)").css
        ({left:(slides*width)});}
        if(times===slides-1){$(o.slides,$t).children(":eq("+(slides-1)+")").css
        ({ position:"absolute",left:-width});}
        $(o.slides,$t).children().fadeIn(o.fadespeed);
        active = false;

        });
        break;

  12. Hi Raymond,
    Thanks for the Tutorial, its awesome!
    I have one question,
    Its possible to make all transitions with fade?

    Thanks!
    Eduardo

  13. 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?

  14. 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

  15. 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

  16. 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

  17. 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?

  18. 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?

  19. 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.

  20. 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.

  21. @Eric: your code works for fading instead of sliding but only for next button. Can you share the code for the left button?

    Cheers!

  22. $(function(){
    $(‘#loopedSlider’).loopedSlider({
    autoStart: 6000,addPagination:true,containerClick:false
    });
    });

    NOW CONTAINER CLICK DOESNOT WORKING :)

    PS.
    Raymond, thx for tutorial !!!!

  23. 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

  24. Hi,

    Thanks for the great tutorial. Does anyone know of a way to add captions to images using this slider?

    Thank you!

  25. 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

  26. 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!

  27. 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?

  28. great work!

    I’m still a newbie in jquery I need help guyz..
    I would like to have this numbers to be on top of the images but using squares…

    Also how could I go for smooth transition of fading effect…

    I did also noticed from the sample with autostart.. when I click the a number… why did the images doesn’t loop anymore..

    Any work for my problems…

    Thanks in Advanced… I really need your help with this one

  29. Hi Raymond,

    Thanks for the tutorial, One question , Is there anyway we can take out this rewind? can it be stop once it reaches 5th or the last slide?, also the button next gets disabled on coming to last slide?

    Any help will be highly appreciated.

    Thanks
    Bobin

  30. Hi,

    I’d like to add ‘SHARE’ functionality to each slide, so that when a user sends someone a link to that image, the page loads and goes directly to that specific slide.

    Would anyone know how to implement this?

    Cheers.

  31. I have a question regarding the navigation links. They work when placed in the same as the actual slideshow, but when placed in a different div, the links don’t work.

    Example of what i’m trying to do:

    Am I crazy or missing something obvious?

  32. Hey I’m hoping someone still keeps up with this thread. Nice it’s what I’ve been looking for, but how do you get the slide show to start again after its been clicked

  33. My website isn’t published just yet, so I can’t show you the site. But I do have an issue… I’m brand new to this, so I’m not sure what’s going on. I loaded the plugin into dreamweaver and I got everything to work except for the fact that when I click on previous, next, or any other the numbers, they don’t work. If I click on the images, they’ll slide to the next one. But that’s about it.

    If you need anything to help you help me, let me know.

    Thank you.

  34. Great tutorial.

    I added a forward and reverse keystroke function based on left and right arrow keys.

    Just add this to the JS file:

    $(document).keydown(function (e) {
    var keyCode = e.keyCode || e.which,
    arrow = {left: 37, up: 38, right: 39, down: 40 };

    switch (keyCode) {
    case arrow.left:
    animate(“prev”,true);
    if(o.autoStart){
    if (o.restart) {autoStart();}
    else {clearInterval(sliderIntervalID);}
    }
    return false;
    break;
    case arrow.up:
    //..
    break;
    case arrow.right:
    animate(“next”,true);
    if(o.autoStart){
    if (o.restart) {autoStart();}
    else {clearInterval(sliderIntervalID);}
    }
    return false;
    break;
    case arrow.down:
    //..
    break;
    }
    });

  35. Hey Eric, thanks for the tutorial it really helped. But as a few people before me inquired, I was wondering if it would be possible to make the images fade instead of slide. I noticed you posted something earlier, but I couldn’t figure out where to place it in the code. I would really appreciate it if you could help. Thanks.

  36. I have used this plugin for joomla site. everything is ok in all pages except that page where I have used ckform plugin. What is the main problem on using that page where ckform is kept ?? When I remove mootools.js file from that page then it works fine.. I think its due to jquery conflict. Anyone here to help me. Its urgent!!!

    Thanks for advance and sorry for my language…

  37. What can i do to move to the next slide after the click?

    Some kind of restart function after click.

    Thanks!

  38. sir, i try it pagination on the navigation link.
    like if i click on blog it show blog image on slider. but i am not implementing it…
    any suggestion…

  39. Hi There,
    can anyone please help me to add a start function. Previous and Next stop the slide move. I need to it again.

    Any help will be greatly appreciated!!!

    Latif

  40. It works very well.But you have missed one thing or something like bug.. If count of images or divs in .slides is 2, its not worked at the start.I’ll share the solution here, if i can fix it. If u wanna see this issue, try the slider with only 2 images and autoslide true!

    Cheers

  41. Hi,

    Great loop slider :)
    One thing though, I’ve replaced the number thumbnails with images but is there a way I could have them faded out apart from the currently active one i.e active thumbnail 100% others 50% etc?

    Spence

  42. Hi,

    I need the answers for above two questions and i have one more question.

    1.I’ve replaced the number thumbnails with images but is there a way I could have them faded out apart from the currently active one i.e active thumbnail 100% others 50% etc.

    2. Previous and Next stop the slide move. Once a slide viewed for 2mins, it should scroll automatically.

    3. I want to divide the image section into two. Half of them are image and half of them are text(with read more..option). Is there any css modification i need to do to split the image area?

    Thanks in advance.

  43. Hi,

    This is wonderful slider but i need to change slide pagination like next and preview animate not fade.

    Can you pls help?

  44. Hi.

    Great script.
    However, I would like to add a functionality to the navigation, so that it displays “You’re watching slide x out of y slides”. How can I do that?

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>