Criando uma apresentação de slides em jQuery (não imagens)

Question

Eu tenho um par de elementos div contido em um div recipiente, e eu gostaria de slides através deles, mostrando apenas um de cada vez, e depois de um certo deslizamento tempo limite da div atualmente disponíveis ao esquerda usando uma animação, e slide na próxima div da direita.

O meu HTML é algo como isto:

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

Eu estou usando o seguinte script para isso:

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

Mas ele não está funcionando. Quando a função nextSlide é chamado pela primeira vez, Firefox informa o seguinte erro:

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

E quando eu adiciono $('#topMaps div:nth-child(' + currentSlide + ')') no painel Watch em Firebug, ele retorna uma coleção de 10 elementos? Reall não sei o que está acontecendo.

Talvez alguém pode me ajudar?

Editar eu descobri o problema com o selector, eu precisava usar $('#topMaps>div:nth-child(' + currentSlide + ')') (aviso do >). Ele ainda não está funcionando embora.

Answer 1

Apesar de não ser a resposta que você estava querendo, você já pensou em usar a Cycle Plugin ?

Answer 2

Eu poderia recomendar a criação de um ID para cada div e chamando-o no nextSlide () js função, testar a variável currentSlide e escolher o próximo div Não é uma boa programação coisinha, mas pelo menos você pode fazê-lo funcionar até que você descobrir o que há de errado com $ ( '# topMaps div: nth-child (' + currentSlide + ')')