Day[32] – How to Create a Simple Image Carousel for your Website

Today, I’ll walk you through creating a simple slideshow that you can add on your website. We need HTML, CSS, and jQuery to do this. To see a sample of what we’ll do, check out the feature image above. ☝

The HTML

Let’s build the HTML first. For this tutorial, we’ll use 3 images to cycle through with. We’ll enclose each image in a div and and then enclose the 3 divs in another div.  The code will look like this.

<div class="slideshow">
  <div class="slide">
    <img src="img/image-01">
  </div>
 <div class="slide">
   <img src="img/image-02">
 </div>
 <div class="slide">
   <img src="img/image-03">
 </div>
</div>

The CSS

We’ll keep this style’s simple. We’ll give the main div and the child divs a width of 100%.

.slideshow, .slide {
  width: 100%;
}

The JS

Now let’s animate this. There are different ways of creating a slideshow. We will be using the hide and show methods to hide and show divs as needed.  I’ll write the code first then I’ll explain what each element is doing.

$(".slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('.slideshow > div:first')
    .fadeOut(0)
    .next()
    .fadeIn(1200)
    .end()
    .appendTo('.slideshow');
},  5000);

The first line of the JS code is what we’ll run as soon as the page loads.

$(".slideshow > div:gt(0)").hide();

This code grabs all the divs in the div with class slideshow. the gt(0) gets elements from the first (0) index all the way to the last one. Then, hide() hides all this elements from view.

setInterval(function(),  5000);

The code above allows us to loop through the function that we pass to it. The 5000 is a time parameter that tells setInterval to fun our function() every 5000 milliseconds (every 5 seconds).

Now inside that function our this.

$('.slideshow > div:first') 
   .fadeOut(0) 
   .next() 
   .fadeIn(1200) 
   .end() 
   .appendTo('.slideshow');

// This is just another way of writing:
// $('.slideshow > div:first').fadeOut(0).next().fadeIn(1200).end().appendTo('.slideshow');

This $('.slideshow > div:first')  grabs the first div inside the slideshow div. Then, it fades it out with fadeOut(0). The 0 argument tells fadeOut not to add any transition.

After that, we go to the next div  using the next() method and fade that in to view with fadeIn(1200). We used a parameter here of 1200 milliseconds so that the image fades in slowly instead of just flashing in.

We then end the current filtering chain with end().

After that, we append this whole filter to the main div called slideshow. This last method is what allows us to loop through our images infinitely.

Well, that’s it. I hope that helps. Let me know in the comments below if that works for you. If you also have other methods of creating a carousel or if you have suggestions to improve mine, please drop a comment below.