Crear una presentación de diapositivas en jQuery (no imágenes)

Question

Tengo un par de elementos div contenidos en un contenedor div , y me gustaría desplazarme a través de ellos, mostrando solo uno a la vez, y después de un cierto tiempo de espera deslice el div actualmente visible a la izquierda usando una animación, y deslice el siguiente div desde la derecha.

Mi HTML se parece a esto:

<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>

Estoy usando el siguiente script para esto:

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);
});

Pero no está funcionando. Cuando se llama por primera vez a la función nextSlide , Firefox informa el siguiente 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

Y cuando agrego $ ('# topMaps div: nth-child (' + currentSlide + ')') en el panel Watch en Firebug, ¿devuelve una colección de 10 elementos? Realmente no estoy seguro de lo que está pasando.

¿Quizás alguien puede ayudarme?

edit Resolví el problema con el selector, necesitaba usar $ ('# topMaps > div: nth-child (' + currentSlide + ')') (observe el > ). Sin embargo, todavía no funciona.

Answer 1

Si bien no es la respuesta que deseaba, ¿ha considerado usar el Cycle Plugin ?

Answer 2

Podría recomendar configurar un ID para cada div y llamarlo en la función nextSlide () js, probar la variable currentSlide y elegir el siguiente div No es una buena cosa de programación, pero al menos puede hacer que funcione hasta que descubra lo que está mal con $ ('# topMaps div: nth-child (' + currentSlide + ')')