I had to build a jQuery Slideshow (AKA an image carousel) that scrolls automatically, and I struggled to find the right plugin for the job on such short notice. I just hacked up something quick and dirty using jQuery UI. Here’s the demo for my jQuery Slideshow if you’re interested in jumping straight into the code: http://codepen.io/stephenkim/pen/pCGwE

There are a few steps I had to go through to get this working nicely…

The HTML

I went for a super simple setup where I have three buttons at the top that serve as selectors for the different images that the user can view in the slideshow.

<div class="rowOfCircles">
    <div class="circle circle1 selectedCircle"></div>
    <div class="circle circle2"></div>
    <div class="circle circle3"></div>
</div>
<div class="image image1"></div>
<div class="image image2"></div>
<div class="image image3"></div>

The CSS

The CSS for the sake of this example is drop-dead simple. I’m drawing some circles with CSS and just placing them on top of the slideshow:

.rowOfCircles {
    margin: 0 auto;
    width: 60px;
}
.circle {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    float: left;
    background: #ccc;
    margin-left: 10px
}
.selectedCircle {
    background: #000;
}
.image {
    width: 90%;
    height: 200px;
    margin: 0 auto;
    border: 1px solid #535353;
    margin-top: 15px;
    float: left;
}
.image1 {
    background: #ccc;
}
.image2 {
    background: #FF0000;
}
.image3 {
    background: #3C8C3E;
}

The JavaScript for the jQuery Slideshow

OK, now let’s get to the fun stuff. There were a few key components to the JS:

1. Setup: So there are three images total in the jQuery Slideshow. The first thing I do on document ready is that I hide the second and third images.

   $('.image2, .image3').hide();

2. Display selection: I had to create a click event for the circle-shaped markers, to clearly denote which one is selected and how the image switching works. There’s some jQuery UI fanciness here you might want to read about in the official docs: http://api.jqueryui.com/slide-effect/

   
   $('.circle').click(function(){
       $('.circle').removeClass('selectedCircle');
       $(this).addClass('selectedCircle');
       if ($(this).hasClass('circle1')) {
         $('.image').hide('slide', {direction: 'left'}, 500);
         $('.image1').delay(500).show('slide', {direction: 'right'}, 500);
       }
       else if ($(this).hasClass('circle2')) {
         $('.image').hide('slide', {direction: 'left'}, 500);                
         $('.image2').delay(500).show('slide', {direction: 'right'}, 500);
       }
       else {
         $('.image').hide('slide', {direction: 'left'}, 500);
         $('.image3').delay(500).show('slide', {direction: 'right'}, 500); 
       }
   });

3. Automatic scroll: The feather in the cap here is a setTimeout function that calls back to itself at the end, so that it continues to rotate through the images interminably. Notice how I call changeImage() right before the end of the setTimeout.

   
   function changeImage() {
       setTimeout(function () {
           if ($('.selectedCircle').next().length < 1) {
               $('.circle1').click();       
           }
   	else {
   	    $('.selectedCircle').next().click();   
           }
           changeImage();
   	}, 3000)
   }
   changeImage();

Here's the demo again if you're interested: http://codepen.io/stephenkim/pen/pCGwE

Enjoy! Please comment and share!