jQuery Looped Slider Tutorial

18 June 2009 ~ 78 Comments

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.

78 Responses to “jQuery Looped Slider Tutorial”

  1. Sergio 29 June 2009 at 5:53 am Permalink

    hi there!

    I trying to implement this nice jquery slider into my WP functions.php file. Clould you help me?

  2. Raymond Selda 29 June 2009 at 11:24 am Permalink

    Sure Sergio. I also implemented this slider in my homepage and put the javascript calls in my functions file. Do you like that approach?

  3. Sergio Forés 29 June 2009 at 5:02 pm Permalink

    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.

  4. Raymond Selda 29 June 2009 at 6:18 pm Permalink

    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

  5. Sergio 30 June 2009 at 6:14 am Permalink

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

  6. Nortehanon 2 July 2009 at 4:43 pm Permalink

    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.

  7. Raymond Selda 2 July 2009 at 10:13 pm Permalink

    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.

  8. ed 10 July 2009 at 11:19 pm Permalink

    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

  9. Raymond Selda 11 July 2009 at 10:11 am Permalink

    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.

  10. Alex 23 July 2009 at 3:30 pm Permalink

    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

  11. Eric 8 August 2009 at 4:06 am Permalink

    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.

  12. Gino Paulo 20 August 2009 at 11:46 pm Permalink

    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

    • Raymond Selda 21 August 2009 at 12:51 pm Permalink

      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.

  13. DavidMoreen 21 August 2009 at 9:49 pm Permalink

    Hi there thanks for the very nice plugin. I have one question, is there any cretin licensing, or restrictions?

    • Raymond Selda 22 August 2009 at 12:06 am Permalink

      I didn’t create that plugin. I think I have a link on my article pointing to the author of the plugin. :-)

  14. Eric 21 August 2009 at 10:41 pm Permalink

    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;

    • Lucky 22 July 2011 at 3:53 pm Permalink

      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;

    • Lucky 22 July 2011 at 3:58 pm Permalink

      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;

      • Lucky 26 July 2011 at 4:26 pm Permalink

        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;

  15. Eduardo 17 September 2009 at 11:30 pm Permalink

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

    Thanks!
    Eduardo

  16. Att 20 September 2009 at 5:35 am Permalink

    Thank you for this write-up.

    Is there any way to load the banners in a random order?

  17. lionart 3 October 2009 at 1:25 am Permalink

    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?

  18. Shahriar Hyder 12 October 2009 at 1:25 pm Permalink

    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/

  19. Devin Auspland 18 October 2009 at 6:11 pm Permalink

    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…

  20. Alan Earl 10 November 2009 at 1:56 pm Permalink

    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

  21. kax 13 November 2009 at 5:05 pm Permalink

    Hi
    What should I do if there is only one image in slider? It doesn’t work

  22. blogger 26 November 2009 at 5:01 am Permalink

    Thank you so much for this beautiful plagin! I’ll use it in my future project!

  23. mcometa 10 December 2009 at 7:43 pm Permalink

    Pre, thanks a bunch! Saved my ass!

  24. Devin Walker 17 December 2009 at 7:48 am Permalink

    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

  25. Manuel 7 January 2010 at 7:29 pm Permalink

    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

  26. Mike Mai 12 February 2010 at 2:05 am Permalink

    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?

  27. Sheri 7 March 2010 at 9:28 am Permalink

    Hi :D
    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?

  28. Andy Brown 17 March 2010 at 10:12 pm Permalink

    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.

  29. Andy Brown 17 March 2010 at 10:45 pm Permalink

    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.

  30. Gina Alessia 17 March 2010 at 10:50 pm Permalink

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

    Cheers!

  31. Artee 4 June 2010 at 9:03 pm Permalink

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

    NOW CONTAINER CLICK DOESNOT WORKING :)

    PS.
    Raymond, thx for tutorial !!!!

  32. Carlos 16 June 2010 at 7:32 pm Permalink

    Any idea how you make it change to a certain slide? Ie like pagination but using a different link?

  33. Tasneem 25 June 2010 at 1:56 pm Permalink

    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

  34. heath 30 June 2010 at 12:00 am Permalink

    Hi,

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

    Thank you!

  35. leo 23 July 2010 at 2:27 am Permalink

    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

  36. Dan 27 July 2010 at 11:57 pm Permalink

    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!

  37. Mike 29 July 2010 at 12:17 pm Permalink

    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?

  38. vainfotech 7 September 2010 at 8:31 pm Permalink

    It is very Useful for me and i am also web developer in ahmedabad.

  39. denver 17 September 2010 at 2:23 pm Permalink

    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

  40. TommyE 23 September 2010 at 11:55 pm Permalink

    Thanks for great post. Can you explain how i do to implement this into WordPress, I can´t get it working..

  41. bobin 2 October 2010 at 3:23 pm Permalink

    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

  42. Zain 7 October 2010 at 5:19 am Permalink

    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.

  43. Jens 26 November 2010 at 4:24 pm Permalink

    Nice script. How do I center it in a table cell? I”ve tried several things but I just can”t seem to find any solution.

  44. JD_TheSecond 4 December 2010 at 2:52 am Permalink

    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?

  45. Nova 15 January 2011 at 4:42 am Permalink

    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

  46. Phong Tran 18 January 2011 at 11:00 pm Permalink

    Thanks Raymond Selda

  47. Angelo 25 January 2011 at 1:27 am Permalink

    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.

  48. Meaghan 19 February 2011 at 6:41 am Permalink

    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;
    }
    });

  49. Nick 22 February 2011 at 2:29 pm Permalink

    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.

  50. selmand 10 May 2011 at 5:26 pm Permalink

    where is the timer settings.
    i want to wait images 2 second on screen.

    thanks

  51. Subas 18 May 2011 at 4:53 pm Permalink

    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…

  52. Vilmondes 31 May 2011 at 10:55 pm Permalink

    I’m gonna try it.
    It seems to be a nice plugin.

    Thanks!

  53. Adam 5 June 2011 at 8:05 am Permalink

    Hi,

    I am trying to get the Looped Slider installed on my oscommerce store as described here http://info.template-help.com/after_sale_support/jquery/slider/article6.html but I have not got a clue how to do this! Can anyone point me in the right direction or would anyone be willing to install this for a small fee?

    I have got the website up at http://www.ubermobile.co.uk just need the Looped slider installed

  54. Alex 8 July 2011 at 2:14 am Permalink

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

    Some kind of restart function after click.

    Thanks!

  55. K' Stefani 22 July 2011 at 5:11 pm Permalink

    How to put this on Blogger?
    Could you please help me?

  56. Trina 1 August 2011 at 1:59 pm Permalink

    How can I change the effect to “fade” and still have the hot spots/map id still linking?

  57. Ivan 22 October 2011 at 7:26 am Permalink

    Great work! The most beautiful and usable slider i ever found!

  58. Oleg 19 November 2011 at 1:43 am Permalink

    Thank you for the example!

  59. raza 26 December 2011 at 8:20 pm Permalink

    where are demos please upload some demos

  60. chetan 27 January 2012 at 4:58 pm Permalink

    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…

  61. Abdul Latif 18 March 2012 at 2:49 pm Permalink

    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

  62. kamer dinc 9 April 2012 at 11:15 pm Permalink

    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

  63. Spencer 13 April 2012 at 5:08 am Permalink

    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

  64. Gobenath 20 April 2012 at 10:59 am Permalink

    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.

  65. Ashok 26 June 2012 at 12:22 am Permalink

    Hi,

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

    Can you pls help?

  66. Albert 25 September 2012 at 2:21 am Permalink

    This slider is really fine, but how can I solve this problem? Why the slider don’t show single image?

  67. Meek 14 November 2012 at 6:32 pm Permalink

    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