How to Create a jQuery Image Rotator from Scratch

Learn how to code a simple Image Rotator without using a plugin

So it’s that time again to roll up our sleeves and do some old fashioned front end a’ coding. This tutorial is for an Image Rotator. What is it you ask? An Image Rotator is particularly useful for galleries, articles, or portfolios. You can use it just about anywhere you want to cycle through content. First, take a look at the demo to see what we’re building:

View Demo
View in Github

But there’s hundreds of plugins out there that do this same thing? True – but there’s nothing like writing one for yourself. See, the problem with using a plugin – is that you’re quite limited to the options that they allow you to pass. By writing one for yourself – you know exactly what’s going on and you have total control of what goes on. Ready to get started?


The Markup

The challenge is: we want a clean markup as possible. This makes it easy for search engines to crawl through our content. Start with the code below:

You see, all we have is a mother div. Inside is an unordered list followed by images with enclosed divs around them. This is enough to get our Rotator cooking.

Add Some Javascript

We’re going to use the jQuery Library for our Rotator because of it’s ease of use, and browser compatibility. Make sure in your HTML, you link to the library.

Then open up another script tag, and place the code below:

This loops through all of our “container” divs and adds an “id” attribute to them. The Ids are called “handle” along with “e” – which is the index (a number for each of them). It also adds a class “current” to the first one it finds.

Next, add the code below inside the document ready clause.

Line by line – the code above loops through each of our list items (li tags). It adds the class “current” to the first one it finds. Then wraps the text inside around an anchor tag with class “title”. It then appends another anchor tag with an image inside of them. It finds all of the anchor tags and adds attribute “href” – with a link to “#handle” plus “e” (Remember the ids we assigned to the containers a while ago?).

You see the variable “y” – it’s actually grabbing the large image’s src attribute and storing it in a temporary variable, then assigns it to the small image that we’ve dynamically created above. Finally, variable “t” is grabbing the list item’s text – and assigns it to an H2 tag for the large images. Take a look at your mark up now:

Some Events

We have our clean markup, we’ve dynamically altered it with Javascript and now we’re creating some events. We want the images to automatically rotate, as well as switch once the small images are clicked. Let’s do that first.

Add the lines of code below:

The above code adds some events once we click any of the anchor tags inside our li tags. It first checks that if the container we’re clicking for has a “current” class – we immediately exit (by calling return false). If it doesn’t, we run a function called “showImage” (which we haven’t built yet). It also removes ANY “current” class on ALL li tags, then adds “current” ONLY to it’s parent.

The showImage() Function

We create functions so we can reuse it anywhere in our code. The showImage() function simply changes the z-index property and opacity of the image container.

Place the above code outside of the document.ready clause (but inside our script tags). You notice that showImage() accepts two parameters – the image and duration. In our previous click event – we pass “c” – which was the “href” value of whichever anchor tag we clicked. We also pass “20” – which means 20 milliseconds.

The rotateImages() Function

Now we want to automatically cycle through the large and small images. We create two functions for this – rotateImages() and runRotateImages(). The main one – rotateImages() does all of the work:

It first looks for the list items, and container with the “current” class in them. Note that this could be the first – or anyone of them once we click. Then it checks if there’s no div after it by checking length “(nxtPhoto.length == 0)”, and goes back to the first list item and div if there’s none.

Again, it removes “current” class and adds it to the next. Finally, we run the “showImage()” function and pass “nxtPhoto” and 300 milliseconds. As you might have guessed, runRotateImages() simply runs rotateImages(). But it is wrapped in setInterval() and assigned to a variable “xx”. This will allow us to pause and proceed with our animation at any given time.

Let’s add the call to our two functions inside the document.ready clause:

The above runs our main animation, then we create a pause on hover() on top of our main div by using “clearTimeout()”. It proceeds to our main function on hover out.

We can’t preview any of our code as of yet – we can’t really see improvements at this stage. Let’s beautify our work with some styles. That’s coming up next.

Some CSS Magic

Here we are, the final part of our exercise. If you’ve stuck with me all this time – you guys are true web devs. So I’m not going to explain what the style does – you can figure that out for yourself. Wrap the code below in a set of style tags:

Simply put, the CSS arranges all of the big images into an absolute position – so they’re all stacked up on top of each other. The list items are also positon – but to the right of the large images. Additional styles are added to the current list items: less opacity on the inactive ones. This gives a nice touch to our animation. The rest are styles related to the demo file.


There are no download files for this tutorial – you can simply go to the demo and view it’s source and copy it. My intentions are for you to actually follow the above tutorial and do it yourself. Also check out these Image Rotators that are have different approaches code-wise, but the final output is somewhat similar.

26 thoughts on “How to Create a jQuery Image Rotator from Scratch”

  1. The reason I ask is, I’m trying to modify Agency theme to take the first image in a post instead of the Featured Image (I want a different thumbnail displayed than what is shown in the slider). I haven’t had much luck so far, though it might be more complex than realistic.

  2. Quick question. What modifications have to be done to make it fade from the previous one to the next one instead of fading up from white? I’ve been piddling with it for way, way, way too long…

      1. That’s what I’ve been doing, but the function just prior to fading in the image sets all images to opacity 0.0 and zIndex 2, including the one I want to fade up the next one in front of. Is there a way to keep that one from getting blanked out like the rest? I even tried passing a second variable in the showImage() function (current and next) and couldn’t figure it out.

  3. Hi!

    need help about thumb images i want i to put outside the #feature css and make it horizontally . hard to display the div images horizontally

  4. I change click image by hover and i see the bug, but i don’t understand to fix that. When u hover some image and hover out of #featured, try that some time and when u hover a image, the slider will not stoped? how to fix that thank :)

  5. What would be the easiest way to add an external link to either the photo or the tag on the photo. I want each image or headline to link to another page on our site. I have been trying for a while and the link keeps getting out of order.


    1. You can add a new attribute for each link item:

      and it the part where you’re creating the large images, do something like:

      var theLink = $(this).attr(‘data-item’);
      $(‘#handle’ + e).append(‘a href=”‘+theLink+'”>’ + t + ‘/a>’);

      1. Thanks for the reply Michael. In my case I have 3 images. I tried what you posted and the link works correctly on the first photo but once it rotates, it pulls the wrong link, in my case the link from the 3rd picture when the second picture appears. It continues being out of order as it rotates through. The first link never comes back as it rotates through, just the second and third on the wrong picture. The text is correct, just not the link. Any ideas?

        Thanks again for your help!

Leave a Reply

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