WordPress : Curseur – Le bouton Précédent masque la première diapositive au lieu de la diapositive précédente
J’ai créé du CSS et du JavaScript qui transforment la galerie native de WordPress en diaporama. Pour chaque galerie, j’ai des boutons suivant et précédent qui affichent chaque diapositive lorsqu’on clique dessus.
Le problème est que lorsque vous cliquez pour afficher une diapositive précédente, seule la première diapositive s’affiche. Je pense que c’est parce que le compteur initial qui se trouve en dehors des fonctions de clic est défini sur 0. Existe-t-il un moyen de savoir sur quelle diapositive se trouve le compteur entre chaque fonction ou d’ajuster les fonctions elles-mêmes ?
Voici le Javascript :
function() {
...
var gallery = document.querySelectorAll('.single.slider .gallery');
var galleries = [ document.querySelector('.single.slider #gallery-1'),
document.querySelector('.single.slider #gallery-2') ];
var slides = [ document.querySelectorAll('.single.slider #gallery-1 .gallery-item'),
document.querySelectorAll('.single.slider #gallery-2 .gallery-item') ];
var slides1Count = 0;
var slides2Count = 0;
function hideFirstSlide() {
// slides[0] = first location of the array in the slides variable, slides[1] = second, etc.
// slides[0][0] = first slide inside of the first array
for (var iGal = 0, len = galleries.length; iGal < len; iGal++) {
//console.log('number of galleries: ' + iGal);
for (var jSlide = 0, len = slides.length; jSlide < len; jSlide++) {
//console.log('number of slides within gallery: ' + slides[jSlide].length); // for debugging
//console.log(slides[0][0]); // for debugging
// We must loop over each slide when using querySelectorAll
for (var kEachSlide = 0; kEachSlide < slides[jSlide].length; kEachSlide++) {
//console.log(slides[jSlide].length); // Number of slides within current selected query
// Hide all slides within each slides array;
if (slides[0][kEachSlide]) {
slides[0][kEachSlide].classList.add('hide');
}
if (slides[1][kEachSlide]) {
slides[1][kEachSlide].classList.add('hide');
}
// Show first slide within each slides array
if (slides[0][0]) {
slides[0][0].classList.remove('hide');
}
if (slides[1][0]) {
slides[1][0].classList.remove('hide');
}
}
}
}
}
window.onload = hideFirstSlide();
for (var i = 0, len = gallery.length; i < len; i++) {
// Add slider controls to each gallery
gallery[i].insertAdjacentHTML('afterend', '<div class="slider-button-panel"><button class="slider-previous"></button><button class="slider-startshow">Start Slideshow</button><button class="slider-next"></button></div>');
//console.log(gallery.length);
}
var sliderButtonPrevious = document.querySelectorAll('.single.slider .slider-previous');
var sliderButtonNext = document.querySelectorAll('.single.slider .slider-next');
var sliderNext = [ document.querySelector('.single.slider #gallery-1 + .slider-button-panel .slider-next'),
document.querySelector('.single.slider #gallery-2 + .slider-button-panel .slider-next') ];
var sliderPrevious = [ document.querySelector('.single.slider #gallery-1 + .slider-button-panel .slider-previous'),
document.querySelector('.single.slider #gallery-2 + .slider-button-panel .slider-previous') ];
// Show each subsequent slide one at a time by clicking the next and previous buttons
// checking if each button exists on the page first
if (sliderNext[0]) {
sliderNext[0].addEventListener('click', showNext(slides[0], slides1Count));
}
if (sliderNext[1]) {
sliderNext[1].addEventListener('click', showNext(slides[1], slides2Count));
}
if (sliderPrevious[0]) {
sliderPrevious[0].addEventListener('click', showPrevious(slides[0], slides1Count));
}
if (sliderPrevious[1]) {
sliderPrevious[1].addEventListener('click', showPrevious(slides[1], slides2Count));
}
// Next slide function
function showNext(obj, counter) {
return function() {
obj[counter].classList.add('hide');
counter++;
if (counter === obj.length) {
counter = obj.length - 1;
}
obj[counter].classList.remove('hide');
//console.log(counter);
}
}
// Previous slide function
function showPrevious(obj, counter) {
return function() {
obj[counter].classList.add('hide');
counter--;
if (counter === -1) {
counter = 0;
}
obj[counter].classList.remove('hide');
console.log(counter);
}
}
)();
Voici le code HTML et CSS pertinent :
<div id="gallery-1" class="gallery galleryid-555 gallery-columns-3 gallery-size-large">
<figure class="gallery-item">
<div class="gallery-icon landscape">
<a href="#"><img src= ... /></a>
</div>
<figcaption class="wp-caption-text gallery-caption" ...>A Caption</figcaption>
</figure>
<figure class="gallery-item hide">
<div class="gallery-icon landscape">
<a href="#"><img src= ... /></a>
</div>
</figure>
...
each slide thereafter has .hide class attached
</div>
<div id="gallery-2" class="gallery galleryid-555 gallery-columns-3 gallery-size-large">
<figure class="gallery-item">
<div class="gallery-icon landscape">
<a href="#"><img src= ... /></a>
</div>
</figure>
<figure class="gallery-item hide">
<div class="gallery-icon landscape">
<a href="#"><img src= ... /></a>
</div>
</figure>
...
</div>
...
.gallery-item {
margin: 0 auto;
}
.single.slider .gallery {
position: relative;
min-width: 100%;
}
.single.slider .gallery-item {
max-width: none;
position: absolute;
top: 0;
width: 100%;
}
.hide {
display: none;
}
J’inclus également une version simplifiée dans le JSFiddle ici : https://jsfiddle.net/jgpws/fkbrbkLa/.
Merci.
Solution n°1 trouvée
D’accord, donc après des mois de bricolage et de lecture de plusieurs tutoriels et autres articles SO, j’ai finalement trouvé ce qui semble être une solution.
J’ai changé chaque fonction distincte qui augmente ou diminue les diapositives (masquer et afficher) en une fonction qui ne gère que le comptage vers le haut et vers le bas. Cette fonction renvoie deux objets qui comptent vers le haut ou vers le bas. Ensuite, les gestionnaires de clic ont été modifiés pour ajouter et supprimer la classe hide. Ensuite, dans le gestionnaire de clics, la fonction count devait être appelée à nouveau. Cette partie n’a fonctionné que par essais et erreurs. Ainsi, je sais seulement que cela a fonctionné, mais pas pourquoi. Peut-être qu’il réinitialise l’emplacement de la liste de nuds après avoir caché/montré ?
De plus, par exemple, lorsque je clique pour avancer puis que je clique immédiatement pour revenir en arrière, je dois cliquer deux fois. Au deuxième clic, la diapositive revient en arrière.
Étant donné que cette solution était assez proche de ce que je cherchais, je suis d’accord avec elle. Voici le code mis à jour :
function() {
...
var slides = [ document.querySelectorAll('.single.slider #gallery-1 .gallery-item'),
document.querySelectorAll('.single.slider #gallery-2 .gallery-item') ];
//var slides1Count = 0;
//var slides2Count = 0;
...
// Next slide function
function showSlide(obj) {
var counter = 0;
return {
showNext: function() {
counter++;
if (counter === obj.length) {
counter = obj.length - 1;
}
console.log('Next slide: ' + counter);
return counter;
},
showPrevious: function() {
counter--;
if (counter < 0) {
counter = 0;
}
console.log('Previous slide: ' + counter);
return counter;
}
}
}
// Show each subsequent slide one at a time by clicking the next and previous buttons
// checking if each button exists on the page first
function addClickEvents() {
var currentSlide1 = showSlide(slides[0]);
var currentSlide2 = showSlide(slides[1]);
if (sliderNext[0]) {
sliderNext[0].addEventListener('click', function() {
slides[0][currentSlide1.showPrevious()].classList.add('hide');
slides[0][currentSlide1.showNext()].classList.remove('hide');
slides[0][currentSlide1.showNext()];
});
}
if (sliderNext[1]) {
sliderNext[1].addEventListener('click', function () {
slides[1][currentSlide2.showPrevious()].classList.add('hide');
slides[1][currentSlide2.showNext()].classList.remove('hide');
slides[1][currentSlide2.showNext()];
});
}
if (sliderPrevious[0]) {
sliderPrevious[0].addEventListener('click', function() {
slides[0][currentSlide1.showPrevious()].classList.remove('hide');
slides[0][currentSlide1.showNext()].classList.add('hide');
slides[0][currentSlide1.showPrevious()];
});
}
if (sliderPrevious[1]) {
sliderPrevious[1].addEventListener('click', function () {
slides[1][currentSlide2.showPrevious()].classList.remove('hide');
slides[1][currentSlide2.showNext()].classList.add('hide');
slides[1][currentSlide2.showPrevious()];
});
}
}
window.onload = addClickEvents();
)();
Certains des noms de fonctions peuvent être modifiés pour mieux décrire ce qu’ils font, mais cela a fonctionné pour moi.
Les exemples de code trouvés dans l’article Comprendre les fermetures JavaScript avec facilité m’ont beaucoup aidé, car c’est l’adaptation d’une partie du code de l’article qui m’a aidé à trouver un compteur qui peut être partagé entre l’événement de clic de chaque bouton.
0 commentaire