2017-10-20 11 views
0

J'ai un diaporama qui utilise jQuery cycle2. J'ai inclus un jsfiddle avec une maquette de comment il doit fonctionner dans mon projet: https://jsfiddle.net/b1tfx58o/2/Comment déplacer un élément sur un changement de diapositive en utilisant jQuery cycle2?

Il a des liens de navigation sur le côté et il a une petite boîte rouge sur le bord qui est censé se déplacer pour s'aligner avec le nav lien. Par exemple si je clique sur "diapositive 2" que la boîte rouge va glisser vers le bas et rester là comme pour la diapositive 1. Si je clique sur la diapositive 1 ou la diapositive 3, elle se déplacera au milieu de la ligne lien. Vous devriez également pouvoir cliquer sur la case rouge pour passer à la diapositive suivante. J'ai cette partie qui fonctionne mais ne bouge pas lorsque je clique sur les liens. Toute aide à ce sujet serait grandement appréciée!

Le script jusqu'à présent (vérification de la jsFiddle aura plus de sens):

var icon = $('.icon'); 
var slideshow = $('.cycle-slideshow'); 

icon.on('click', function(e){ 
    e.preventDefault(); 
    slideshow.cycle('next', function(){ 
    }); 
}); 

Répondre

0

Vous devez ajouter clic auditeurs à chaque lien de liste, pour exécuter une fonction qui .getBoundingClientRect() de « ceci », en vous référant au lien cliqué, utilisez la valeur 'top' de getBCR pour changer la position de votre élément icon. Vous devrez probablement le combiner avec window.scrollY pour votre projet.

Voir ici https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect & bonne chance