Creating a slideshow in jQuery (not images)

Question

Hey everyone,

I have a couple of div elements contained in one container div, and I would like to slide through them, showing only one at a time, and after a certain timeout slide the currently visible div to the left using an animation, and slide in the next div from the right.

My HTML looks something like this:

<div id="topMaps" style="height: 225px; overflow: hidden;">
  <div>First slide - some content here</div>
  <div>Second slide - some content here</div>
  <div>... slide - some content here</div>
  <div>n'th slide - some content here</div>
</div>

I'm using the following script for this:

var currentSlide = 1;
var numSlides = -1;
var slideSpeed = 1000;
var timePerSlide = 3500;

function nextSlide() {
    $('#topMaps div:nth-child(' + currentSlide + ')').hide("slide", { direction: "left" }, slideSpeed);
    currentSlide += 1;
    if (currentSlide >= numSlides)
        currentSlide = 1;
    $('#topMaps div:nth-child(' + currentSlide + ')').show("slide", { direction: "left" }, slideSpeed);

    setTimeout(nextSlide, timePerSlide);
}

$(document).ready(function() {
    numSlides = $('#topMaps div').length;
    setTimeout(nextSlide, timePerSlide);
});

But it's not working. When the nextSlide function is called for the first time, Firefox reports the following error:

o.easing[this.options.easing || (o.easing.swing ? "swing" : "linear")] is not a function
http://localhost/templates/front/default/js/jquery.js
Line 19

And when I add $('#topMaps div:nth-child(' + currentSlide + ')') in the Watch panel in Firebug, it returns a collection of 10 elements? Reall not sure what's going on.

Maybe someone can help me out?

edit I figured out the problem with the selector, I needed to use $('#topMaps>div:nth-child(' + currentSlide + ')') (notice the >). It's still not working though.

Answer 1

While not the answer you were wanting, have you considered using the Cycle Plugin?

Answer 2

I might recommend setting an ID for each div and calling it in the nextSlide() js function,test the currentSlide variable and choose the next div It's not a good programming thingy but you can at least make it work till you figure out what's wrong with $('#topMaps div:nth-child(' + currentSlide + ')')