Créer un diaporama dans jQuery (pas des images)

Question

J'ai deux éléments div contenus dans un conteneur div , et je souhaite les parcourir en affichant un seul à la fois, et après un certain timeout, faites glisser la div actuellement visible vers la gauche à l'aide d'une animation, puis dans la prochaine div en partant de la droite.

Mon code HTML ressemble à quelque chose comme ceci:

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

J'utilise le script suivant pour cela:

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

Mais ça ne marche pas. Lorsque la fonction nextSlide est appelée pour la première fois, Firefox signale l'erreur suivante:

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

Et lorsque j'ajoute $ ('# topMaps div: nth-child (' + currentSlide + ')') dans le panneau de surveillance dans Firebug, une collection de 10 éléments est-elle renvoyée? Je ne sais vraiment pas ce qui se passe.

Peut-être que quelqu'un peut m'aider?

modifier J'ai découvert le problème avec le sélecteur. J'avais besoin d'utiliser $ ('# topMaps > div: nth-child (' + currentSlide + ')') (remarquez le > ). Cela ne fonctionne toujours pas.

Answer 1

Bien que ce ne soit pas la réponse que vous vouliez, avez-vous envisagé d'utiliser le Cycle Plugin ?

Answer 2

Je pourrais recommander de définir un ID pour chaque div et de l'appeler dans la fonction nextSlide () js, tester la variable currentSlide et choisir la prochaine div Ce n'est pas une bonne chose de programmation mais vous pouvez au moins le faire fonctionner jusqu'à ce que vous compreniez ce qui ne va pas avec $ ('# topMaps div: nth-child (' + currentSlide + '' ')