Curseur Les images fonctionnent correctement pour le curseur droit mais pas pour la gauche

Question

J'ai créé un site web pour un ami qui inclut un diaporama avec ses derniers posts Instagram. Le diaporama a un curseur flèche droite et gauche.

Le curseur droit fonctionne comme je le souhaite; il montre chaque image du tableau à chaque clic, et continue sans tenir compte du nombre de fois que l'utilisateur clique sur le curseur droit. Quand il atteint la dernière image dans le tableau, il recommence à la première image en raison d'une instruction if mise en place.

Cependant, j'ai des problèmes avec le curseur gauche et je suppose que c'est la variable de compteur? Avec le code actuel, ce qui se passe est quand je clique sur le curseur gauche (avec la page actualisée et sans même cliquer sur le curseur droit), il va à la deuxième image dans le tableau index1, plutôt que la dernière. Ensuite, je clique à nouveau sur le curseur gauche sans aucun changement, puis quand je clique dessus, la troisième fois il va à la dernière image dans le tableau et fonctionne comme il le devrait jusqu'à ce qu'il atteigne la deuxième image dans le tableau - parce que pas aller à la première image, il saute la première image après un autre clic de rien se passe, puis va à la dernière image dans le tableau. Se répète de cette manière (désolé d'aller si en détail, mais je veux que les gens aient une idée de ce qui se passe ici si le code n'aide pas).

var sliderImages = []; 
 
var counter = 1; 
 

 
sliderImages[0] = "images/i1.png"; 
 
sliderImages[1] = "images/i2.png"; 
 
sliderImages[2] = "images/i3.png"; 
 
sliderImages[3] = "images/i4.png"; 
 
sliderImages[4] = "images/i5.png"; 
 

 
$("#right-arrow").click(function() { 
 

 
    $(".active").attr("src", sliderImages[counter]); 
 
    counter++; 
 
    $('#count').text(counter); 
 
    if (counter >= sliderImages.length) { 
 
    counter = 0; 
 
    } 
 

 
}); 
 

 
$("#left-arrow").click(function() { 
 
    $(".active").attr("src", sliderImages[counter]); 
 
    counter--; 
 
    if (counter <= 0) { 
 
    counter = sliderImages.length 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="instagram-feed"> 
 
    <div class="container"> 
 

 
    <h2>INSTAGRAM GALLERY</h2> 
 
    <div class="insta-gallery"> 
 

 
     <img src="images/left-arrow.png" class="arrow" id="left-arrow"> 
 
     <img src="images/i1.png" class="active"> 
 
     <img src="images/right-arrow.png" class="arrow" id="right-arrow"> 
 

 
    </div> 
 
    </div> 
 
    <div class="clear"></div> 
 
</section>

Answer 1

Lorsque votre page se charge, vous définissez counter à 1. Lorsque vous cliquez sur le bouton flèche gauche, la première chose que vous faites est de définir l'image à la valeur counter, et donc vous définissez l'image à 1. (Rappelez-vous, les tableaux sont indexés à 0, ce qui signifie 1 se réfère à l'article deuxième).

Vous seriez mieux si counter faisait référence à l'image actuelle, ne pas essayer de supposer le à venir un. Voir mes commentaires dans le code modifié ci-dessous pour plus d'informations.

var sliderImages = []; 
 
var counter = 0;   //Start with first image instead of second 
 

 
sliderImages[0] = "images/i1.png"; 
 
sliderImages[1] = "images/i2.png"; 
 
sliderImages[2] = "images/i3.png"; 
 
sliderImages[3] = "images/i4.png"; 
 
sliderImages[4] = "images/i5.png"; 
 

 
$("#right-arrow").click(function() { 
 
    counter++;           //Moving forward by one 
 
    if (counter > sliderImages.length-1) counter = 0; //Wrap-around if we exceed length-1 
 
    $(".active").attr("src", sliderImages[counter]);  //Update img src 
 
}); 
 

 
$("#left-arrow").click(function() { 
 
    counter--;           //Moving backward by one 
 
    if (counter < 0) counter = sliderImages.length-1; //Wrap-around if negative 
 
    $(".active").attr("src", sliderImages[counter]);  //Update img src 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="instagram-feed"> 
 
    <div class="container"> 
 

 
    <h2>INSTAGRAM GALLERY</h2> 
 
    <div class="insta-gallery"> 
 

 
     <img src="images/left-arrow.png" class="arrow" id="left-arrow"> 
 
     <img src="http://via.placeholder.com/350x150" class="active"> 
 
     <img src="images/right-arrow.png" class="arrow" id="right-arrow"> 
 

 
    </div> 
 
    </div> 
 
    <div class="clear"></div> 
 
</section>

Answer 2

Mis à jour votre code un peu:

var sliderImages = []; 
var counter = 0; 

sliderImages[0] = "images/i1.png"; 
sliderImages[1] = "images/i2.png"; 
sliderImages[2] = "images/i3.png"; 
sliderImages[3] = "images/i4.png"; 
sliderImages[4] = "images/i5.png"; 

$("#right-arrow").click(function() { 
    counter++; 
    $(".active").attr("src", sliderImages[counter]); 
    $('#count').text(counter); 
    if (counter >= sliderImages.length) { 
    counter = 0; 
    } 

}); 

$("#left-arrow").click(function() { 
    counter--; 
    $(".active").attr("src", sliderImages[counter]); 
    if (counter <= 0) { 
    counter = sliderImages.length - 1; 
    } 

}); 

Answer 3

Utilisez un contre comme si vous manipulez index, mettez-le d'abord à 0.

est ici la logique de base:

var sliderImages = [ 
 
    "//placehold.it/100x100/0bf?text=O", 
 
    "//placehold.it/100x100/f0b?text=1", 
 
    "//placehold.it/100x100/0fb?text=2", 
 
    "//placehold.it/100x100/fb0?text=3", 
 
    "//placehold.it/100x100/b0f?text=4" 
 
]; 
 

 
var n = sliderImages.length; // Total slides 
 
var c = 0;     // Counter 
 

 
function anim() { 
 
    $("#mainImage").attr("src", sliderImages[c]); 
 
} 
 

 
$("#prev").on("click", function() { 
 
    --c;      // Pre-decrement 
 
    if (c < 0) { c = n-1; } // If lower than 0 - go to last slide 
 
    anim();     // animate 
 
}); 
 

 
$("#next").on("click", function() { 
 
    ++c;      // Pre-increment 
 
    if (c > n-1) { c = 0; } // If greater than num of slides - go to first slide 
 
    anim();     // animate 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<img id="mainImage" src="//placehold.it/100x100/0bf?text=O"> 
 

 
<br> 
 
<button id="prev">&larr;</button> 
 
<button id="next">&rarr;</button> 
 

 
<span id="count"></span>

Ou voici un extrait formule plus propre de ce qui précède:

var sliderImages = [ 
 
    "//placehold.it/100x100/0bf?text=O", 
 
    "//placehold.it/100x100/f0b?text=1", 
 
    "//placehold.it/100x100/0fb?text=2", 
 
    "//placehold.it/100x100/fb0?text=3", 
 
    "//placehold.it/100x100/b0f?text=4" 
 
]; 
 

 
var n = sliderImages.length; // Total slides 
 
var c = 0;     // Counter 
 

 
function anim() { 
 
    c = c<0 ? n-1 : c%n;       // Fix counter 
 
    $("#mainImage").attr("src", sliderImages[c]); // Animate (or whatever) 
 
} 
 

 
$("#prev, #next").on("click", function() { 
 
    c = this.id==="next" ? ++c : --c;    // Increement or decrement 
 
    anim();          // Animate 
 
}); 
 

 
// If you have bullets than you can simply do like: 
 
$(".bullet").on("click", function() { 
 
    c = $(this).index(); 
 
    anim(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<img id="mainImage" src="//placehold.it/100x100/0bf?text=O"> 
 

 
<br> 
 
<button id="prev">&larr;</button> 
 
<button id="next">&rarr;</button> 
 

 
<span id="count"></span>