Write Your Own jQuery Slider

• John Vandivier

This article will show you the code needed to write your own jQuery slider.

Writing your own jQuery slider is a very flexible solution that can:

  1. Accommodate all sorts of media from text to video that other sliders may not.
  2. Incorporate strange animations you may want to write that typical sliders don't have.
  3. Provide a very efficient solution: Why sacrifice load speed for a big plugin when you only need a small bit of function?
  4. Provide a great exercise to learn about coding simple timing functions, sync vs async, jQuery UI animations, and more!
You will need:
  1. HTML
  2. CSS
  3. JS, jQuery, and jQuery UI. You can install these on your site or just link to a CDN for a simpler solution.

The HTML

The key here is just to create a seperate div for each slide inside a single wrapper div. Whatever you want can go inside the div. The divs will need to be accessible through a unique ID, and we will use an additional class to identify the current slide. This example is a simple case with two slides, but you can add more:

<div id='sliderWrapper1'> <div id='slide1' class='sliderSlide currentSlide'> <div class='subhead'>This could be a heading, for example.</div> <img src='example.com' /> </div>

<div id='slide2' class='sliderSlide nextIn'> <div class='subhead'>I am the second slide!</div> <ul> <li>Point 1. This slide is text in this example.</li> <li>Point 2. This slide is text in a list example.</li> <li>Point 3. This slide is text in a list example.</li> </ul> </div> </div>

The CSS

The key in the CSS is to make sure the interior slides are absolutely positioned inside of the wrapper. This prevents the next slide which is coming in from creating problems with the leaving slide during the transition. Also, hide all of the slides except the slide to be initially displayed. I'm not sure the inline-block thing matters but I used it:

#wrapper .slides { display: inline-block; display: none; position: absolute; top: 0px; }

#slide1 { display: inline-block; }

The JS

In this example I identify the hidden slide with a separate class because there is just one, but this is not needed. You can access the same information other ways. In the case of a large number of slides it will be easier to access the slides as an array or jQuery collection.

The important part of the JS is:

  1. Executing the function on an interval.
  2. The function is defined in JS, not jQuery, because we need it to be synchronous. We don't want steps 2 and 3, for example, to occur at the same time or multiple slides will be improperly affected.
  3. For the same reason as in point 2 we have to break the slider function into seperate steps.
  4. Lots of this is customizable! You can change the speed, animation style, and more.
function cycleStep1() { jQuery(\".sliderSlide:not(.nextIn)\").toggle('slide',{direction:'left'},1000).removeClass('currentSlide'); }

function cycleStep2() { console.log('fxn2 called.'); jQuery(".sliderSlide.nextIn").toggle('slide',{direction:'right'},1000).removeClass('nextIn').addClass('currentSlide'); }

function cycleStep3() { console.log('fxn3 called.'); jQuery(".sliderSlide:not(.nextIn)").not('.currentSlide').addClass('nextIn'); }

function cycleSlider() { cycleStep1(); cycleStep2(); cycleStep3(); }

setInterval(function(){ cycleSlider() }, 3500);