Adding Looping to a Content Slider

A few days ago I came across the wonderfully magnificent easySlider jQuery plugin. It makes sliding content vertically or horizontal drop dead simple using totally natural markup and CSS. I immediately worked it into the design of ~/bin (this animation was in my original design on paper) and it worked flawlessly. However, like the plugin’s title implies, it was and is meant to be simple and therefore lacks some features in order to gain ease of use.

I took some time to become more fluent in jQuery, and add some enhancements by modifying the plugin. One of those enhancements was looping, and is the topic of this article. I had no prior experience working with these types of galleries and implementing looping seemed like a fun idea. So here was the result of my tinkering:

How Do You Implement Looping?

Give yourself a minute to get creative. Develop some ideas and strategies on how you would take the following markup for the slides, and make it loop.

<div id="slider">
  <ul>
    <li>content here...</li>
    <li>content here...</li>
    <li>content here...</li>
  </ul>
</div>

I came up with two strategies that use a similar technique to implement the loops. The above loop is an implementation of one of these strategies, but I wanted to compare and contrast my two versions here, and hopefully get some reader feedback on different techniques!

Hidden Moves Strategy

This strategy actually involves physically moving unseen slides around in the DOM. By moving the slides in such a way that there is always the proper “next slide” and looping can continue forever in either direction without errors.

Hidden Moves Strategy

Instantaneous Jumps between Clones Strategy

This strategy actually involves cloning the first slide and adding it to the end of the list. This now makes the first and last slides exactly the same. When we need to handling transitions to and from these slides we can instantly jump between them, and the user is none the wiser.

Instantaneous Jumps Between Clones

Comparing the Pros and Cons of Each

Hidden Moves:

  • Requires no extra space (in theory).

  • Simple to implement moves. 1 line executed as a callback on “next” and before the transition if “prev”

  • Expensive. Requires moving slides on every transition. This is actual DOM manipulation. Sure in nearly all cases this is negligible but it could be a pain for large, complex slides.

  • Wouldn’t work on looping a single slide. Kinda useless though right?

  • Does it work? By taking a slide off of the front won’t everything shift? Yes, this could get tricky, I honestly haven’t tried it.

Instant Jumps:

  • Requires extra space to duplicate the first slide.

  • Simple to clone a slide. 1 line of jQuery.

  • 1 time cost to clone, never again is there a DOM Manipulation cost.

  • Has the ability to loop on a single slide.

  • Tricky code to handle when to jump. Nothing difficult, just messy.

  • Does it work? Yes, Its what I’m using above..

Thats it for my analysis. Do you have any suggestions?

38 Responses

1

Michael Shade on February 2, 2009 at 5:47 pm  #

i really enjoyed this! i’m not much of a coder myself, however, so how would you be able to, instead of slide the images, transition them with a fade?

2

Joseph Pecoraro on February 4, 2009 at 11:45 am  #

@Michael: If you would rather transition them with a fade you’re going to want to store the images all on top of each other and not bother with left/right/width properties. Initially you would have them hidden, by setting their style attributes to “display:none”. When you want to transition you start fading out the current displayed image, and start fading in the next image. Or if you’d rather, completely fade out the first, then start fading in the next.

If you need help with the styling let me know. jQuery even has some nice functions you can use. $(elem).fadeIn() and .fadeOut() with the option of “slow” and “fast” will do the fading animation for you.

3

bradley on March 6, 2009 at 4:17 pm  #

What if I need it to work on mouseover? The easyslider.js file has it set to click, but when I change it to mouseover, it has a weird consequence. Basically, I dont want the previous and next buttons to appear and disappear. I just want it to scroll one way when you rollover one button and scroll the other when you scroll over the other button. Is this possible?

4

bradley on March 6, 2009 at 4:34 pm  #

One more thing I wanted to add. Could this be made into a consistent flow as opposed to going from img to img? When you rollover the next button, could you make it to where it just flows from img to img without stopping?

5

Joseph Pecoraro on March 6, 2009 at 5:23 pm  #

@bradley: I uploaded a newer version of my fork. I implemented hover buttons. There are two new options: “hover” (a boolean) and “hoverPause” (an integer > 0). If you set ‘hover: true’ instead of working onclick, it will work onmouseover! For continuous flow you should set hoverPause to be 0. Also you can set the easing to ‘linear’ or ‘swing’ (the jQuery defaults).

Check out the top example here:
http://bogojoker.com/easySlide/

Grab my version here:
http://bogojoker.com/easySlide/js/easySlider.js
http://bogojoker.com/easySlide/js/easySlider.min.js (minified)

Also available in this version (thanks to some requests by Rahim Haji) are the ability to:
Have next/previous buttons on autoplay. And if the user clicks one of the button the animation will stop. There is also a setting (restartDuration) which, if greater then 0, will restart the animation after the user interruption. That is demonstrated in the lower example on the example page.

Enjoy, and as always feel free to ask me if you have any questions. The code is starting to get unwieldy and may need to be refactored.

6

Ian on March 17, 2009 at 8:59 am  #

How do I style the next/previous buttons? Just can’t work it out, thanks.

7

Joseph Pecoraro on March 17, 2009 at 9:09 am  #

@Ian: Styling the next/previous buttons is easy if you use the IDs of the buttons. You always set the IDs of the buttons with the prevId and nextId options in the easySlider setup. Its easier to style buttons if you don’t use the autogenerated ones, because then you can do all the styling as you normally would, and then simply make those elements be buttons by using their IDs!

If you need an example you can see how I do this at one of my websites:
http://bogojoker.com/shell/

8

Randi on March 27, 2009 at 2:33 pm  #

Hi,
I am also having issues changing the prev/next buttons. I cannot figure this out…grrr. I’m totally new to web design, css, coding, etc. I figured out a lot, but here is what I am trying to do: completely get rid of the blue previous and next buttons that appear on top left (by using the original easyslider script). I want to be able to put arrow images on the left and right sides of the slides (mine is built horizontally and I already have jpgs prepared) and have those be the buttons for next and previous. I only want the previous button to show up once there is a slide to revert back to. Can you help me simplify this? THANK YOU!

9

Joseph Pecoraro on March 27, 2009 at 3:56 pm  #

@Randi: I made my fork of easySlider for this exact reason. An example of what you want is available on one of my websites. The next/prev buttons are pre-existing elements on the page and I point my easySlider to those elements to make them the next/prev buttons:
http://bogojoker.com/shell/

The steps you should take are:

1. Use my version of easySlider. (linked in previous comments)
2. Build/Design your desired next/prev images right into the current page markup. These images can be anywhere in your markup. Note that they can be any html tag, but I’ll use the <img> tag for my example. Give each of these images a unique “id” attribute so that you can uniquely reference them. For instance:

<img src=”…” id=”prevButton” />

<img src=”…” id=”nextButton” />

3. Now when you create the easySlider pass in the follow options:

$(“#slider”).easySlider({
autogeneratePagination: false, /* Gets rid of those default blue links */
nextId: ‘nextButton’, /* That image will now be a next button! */
prevId: ‘prevButton’ /* That image will now be a prev button! */
});

I hope this helps.

10

Randi on March 27, 2009 at 6:30 pm  #

I appreciate your quick response. I’m sure there is something simple I am missing, but I still cannot get rid of those stupid blue prev / next links. Thanks again!

11

Brendan on April 4, 2009 at 10:53 am  #

Do you know how I would add pagination “status” or “progress” outside of the slider div? In other words, show 1 of 3, 2 of 3, 3 of 3, based on the slide I am on?

12

Joseph Pecoraro on April 4, 2009 at 10:59 am  #

@Brendan: My version doesn’t support that, but it would be possible to add that functionality. The script initially calculates how many <li> elements there are, and always keeps track of both that number and the number of the current slide. You could easily add a onchange function to the easySlider that gets called with these values whenever the slider transitions. The onchange function would allow the user to perform whatever they want with the information and their existing markup.

13

Andy on April 6, 2009 at 3:19 pm  #

Hi there, thanks for the script! Really got me headed in the right direction.

I have run into a wall though, and can’t seem to figure it out. If you look at http://bizxmagazine.com/vip_index.php, the script pulls the 150px X 100px logos from the database, and presents them on either side of the page. What I’d like is for the list to be about 500 – 600 pixels tall, displaying a non-stop (linear) scroll of all of them.

I got it working okay, but it doesn’t seem to loop properly. It just repeats the first logos at the end, and then doesn’t display anything else.

any thoughts!

Thanks again!

14

Joseph Pecoraro on April 6, 2009 at 7:17 pm  #

@Andy: I don’t really know too many of the details. However, I would suggest you try to made slides that are 500 or 600pxs tall. You can enable linear scrolling by providing the following key/value pair in the easySlider options:

easing: ‘linear’

15

Rick on April 9, 2009 at 3:55 am  #

Thanks for the awesome script, I just have one problem: it doesn’t work on WebKit-based browsers… Chrome or Safari. I’ve implemented it into a WordPress and it looks and works fine in Firefox, IE and Safari. Any suggestions?

16

Joseph Pecoraro on April 9, 2009 at 7:12 pm  #

@Rick: That is weird. I primarily use WebKit on my Mac and it works fine for me. If you can email me a test case I could take a look. (My email is in the footer).

17

Erik on April 17, 2009 at 6:55 am  #

Hi, this looping method is exactly what I’ve been looking for! Alas, everything works fine in all scenarios except that damn IE6. It works, however, the images that are supposed to slide out of frame to the left and right of the carousel are not hidden, or masked, as it should. Is there a work around?

18

Joseph Pecoraro on April 17, 2009 at 9:08 am  #

@Erik: I am not sure about an IE6 workaround. However I decided a long time ago not to develop or worry about IE6, and with Microsoft’s recent pushes to update users to IE7 and 8 I wouldn’t worry too much.

19

Søren Thuesen on April 21, 2009 at 6:02 pm  #

@Erik: It does in fact work fine in IE6. You’ll probably have to add a width to your container (or some parent element) in combination with ‘overflow: hidden’, that’ll do the trick.

20

Joseph Pecoraro on April 21, 2009 at 9:40 pm  #

@Søren: That sounds like it could work. Thanks for the tip!

21

Ciaran Riddell on April 24, 2009 at 6:24 am  #

Hi Joseph, first off thanks for the great mods to the original script. I wanted to ask what would be involved in, instead of the prev and next buttons, having buttons that point the slider to specific slides? Thanks.

22

Joseph Pecoraro on April 24, 2009 at 9:12 am  #

@Ciaran: That should be pretty easy! Styling or producing markup that would appease everyone would be the tough part.

In EasySlider all that is happening during a slide transition is a margin is changing. In a horizontal slider the margin-left is changing, and for a vertical slider the margin-top is changing. Here I’ll talk about horizontal using “slideWidth” but you could easily do the same with a vertical using the “slideHeight.” Note all of the calculations are in pixels:

The first slide always has margin-left: 0;
The second slide has margin-left: -1 * slideWidth;
The third slide has margin-left: -2 * slideWidth;

The last slide has margin-left: -(totalSlides-1)*slideWidth;

So its very easy to jump to any slide because there is a fixed offset, either width of the slide or the height of the slide.

I think the tough part would be producing the markup or styling. For instance, do people want the number of each slide, just some of the slides, in an ordered list, how about an unordered list?

23

Etrusco on April 26, 2009 at 2:36 am  #

Hi Joseph, thanks for the great adds to the original scripts.

I was wondering how difficult would be having the slides moving in loop and use the hover buttons to actually pause the loop.
Also ,even better, if instead of the button you could pause the loop passing over the actual slide.

thanks

24

Joseph Pecoraro on April 26, 2009 at 8:39 am  #

@Etrusco: You could certainly have the loop pause when you hover over the actual slide. You would just need to add a hover property on the #slider div that stops the autoplay on hover and starts it up again on leave. This is almost identical to how I have the buttons work with autoplay. You click, the autoplay stops and restarts after the restartDuration. So it only took about 20 lines, and I refactored a little.

The updated versions are:
http://bogojoker.com/easySlide/js/easySlider.js
http://bogojoker.com/easySlide/js/easySlider.min.js

I have an example that shows this. Unfortunately I don’t have time to update the text on the page so all the text is wrong, you should look at the source of the page. It is the second example (at the bottom) of this page:
http://bogojoker.com/easySlide/

I added a new property to easySlide() named “pauseable” that accepts a boolean value. By default it is false, so you should make this true. When you make it true, if autoplay is set, whenever you hover over the images they will pause. When you are no longer hovering it uses the “restartDuration” property to restart the autoplay, just like the buttons did.

Enjoy.

25

Etrusco on April 27, 2009 at 5:26 pm  #

Hi Joseph,
Thanks for the awesome script. the loop pause when you hover over the actual slide is just perfect !

Thanks a lot

26

Andy on June 8, 2009 at 5:37 pm  #

I love the modifications you’ve made to this script, but unfortunately it doesn’t work for me in any version of IE. Even your test page located at http://bogojoker.com/easySlide returns two Javascript errors and doesn’t work.

The first error message says:
Line: 3
Char: 289
Expected identifier, string or number

The second error message says:
Line: 14
Char: 4
Error: Object doesn’t support this property or method

Is there a newer version of the script I should be using? I downloaded the one from this link:
http://bogojoker.com/easySlide/js/easySlider.min.js

Thanks,

Andy

27

Joseph Pecoraro on June 8, 2009 at 6:04 pm  #

@Andy: I replied via email, but I want to post here for anyone that stops by the website. I don’t typically test in IE and at the moment I don’t have the time to go debug this issue. If anyone wants to provide an updated version, feel free. I’ll update my scripts and links accordingly.

Cheers.

28

Scott Reeves on June 11, 2009 at 11:40 am  #

About the IE issue…

Remove the comma after the last element in the defaults array, and it will work fine.

So, in the minified version (easySlider.min.js), change as follows:

Before: pausable:false,}
After: pausable:false}

Joseph, thank you very much for this great mod of the Css Globe slider. Exactly what I was looking for!

29

Joseph Pecoraro on June 11, 2009 at 11:58 am  #

@Scott: Thanks, I’ve updated the scripts I link to. I included a couple optimizations and a bug fix with looping backwards.

30

Mathew Smith on June 13, 2009 at 2:59 am  #

Joseph, thanks for the modifications. Just what I needed. Quick question: Is there a way to have something like a DIV contain a title/caption to go along with the current image being displayed? And have this title link to the same URL as the image? Obviously, it would update with each advance. Thanks for your help!

31

Alex on July 4, 2009 at 5:32 pm  #

Well, it works fine after register and logged in.
So, here is my problem:

Pauseable (pause on hover) does not work on first slide. Do you know about this issue?

Thanks for awesome contribution at easySlider.
–Alex

32

Joseph Pecoraro on July 5, 2009 at 5:48 pm  #

@Mathew: Although this plugin doesn’t do this automatically for you, I have put in the groundwork to make this possible. The most recent version has some callback functions, which you can provide, that get triggered “beforeTransition” and “afterTransition”. The documentation for the functions, which explain the parameters is in the comments of the non-minified script. You can use these functions to animate/display your title/caption divs however you want!

@Alex: Thanks for the heads up. This was a simple oversight on my part. Try downloading the newest version. It should work for you now.

33

Alex on July 7, 2009 at 7:14 am  #

Thanks, now it works fine.

34

Simon on November 5, 2009 at 7:59 am  #

Hi Joseph, Great work on this,
I have it working with a constant loop but I dont want to show any buttons
I have tried hiding the buttons by using #pre{display:none;}
but that’s not working. I see in the comments of easySlider.js in relation to the display of buttons, “When looping they always show…”, where can I disable this,
many thanks,
Simon

35

Simon on November 5, 2009 at 9:31 am  #

Ok I figured it out,
If you set the boolean autogeneratePagination to false, you can get rid of the previous, next links.

36

ribblevalleychurch.net « Rick Butterfield on January 9, 2010 at 11:28 am  #

[…] and built by myself. It implements a number of different jQuery effects such as a content slider (easySlider by BogoJoker) on the home and jScrollPane on the content […]

37

YourBudWeiser on March 8, 2010 at 2:22 pm  #

Been searching for some of your modifications and glad I found it. Would love to see you incorporate the numeric pagination as Easy Slider has been updated since you made your enhancements.

http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

38

Lina on November 21, 2011 at 8:14 pm  #

Hi Joseph,

Thank you for your slider code, I really appreciate it! I have placed my arrows on top of my slider and I use autoplay, restartduration and pauseable together. It works fine until I click an arrow and then take the mouse off the slider, then it seems to be triggering the auto interval twice because it begins to slide 2 slides at a time. Do you know how I can fix that?

Kind regards, Lina

Add a Comment

search