Problème avec la galerie d'images jquery

Question

Je fais une simple galerie d'images avec seulement 2 images jusqu'à maintenant. Je veux que le texte change avec l'image. Actuellement, les boutons ne fonctionnent pas et je ne sais pas pourquoi.

$(document).ready(function(){ 
var currPic = 0; 
var pictures = ["sk8.jpg", "3dprntr.jpg"]; 
var text = ['x','y'] 
$("#next").click(function(){ 
    currPic++; 
    $("#myImage").attr("src", pictures[currPic]); 
    $("#desc").html(text[currPic]); 
}); 
$("#prev").click(function(){ 
    currPic--; 
    $("#myImage").attr("src", pictures[currPic]); 
    $("#desc").html(text[currPic]); 
})}); 

Et le code html correspondant

<div id="gallery"> 
     <img src="sk8.jpg" border="0"/> 
    </div> 
    <div id="buttons"> 
     <input type="button" value="Previous" id="prev" /> 
     <input type="button" value="Next" id="next" /> 
    </div> 
    <p id = "desc">text</p> 

Answer 1

Utiliser la même logique pour text que vous utilisez pour image

fixer également quelques questions:

• id manque au image
• var currPic devrait être var currpic, que vous utilisez dans votre code plus:

Essayez ceci:

Try out this code: 

$(document).ready(function(){ 
 
    var currpic = 0; 
 
    var pictures = ["https://gaytravel-destinations.s3.amazonaws.com/32491/united-states-beaches-and-scenery__small.jpg", "http://www.carolinasusi.com.au/cmsvltl/img/8/5/a/596dbfe80598106527a80d1ddddf6/Le-Marche%2C-Blue-skies-and-Le-Marche-scenery.jpg"]; 
 
    var texts = ["new text", "other new text"]; 
 
    $("#next").click(function(){ 
 
     currpic++; 
 
     $("#myImage").attr("src", pictures[currpic]); 
 
     $("#desc").text(texts[currpic]); 
 
    }); 
 
    $("#prev").click(function(){ 
 
     currpic--; 
 
     $("#myImage").attr("src", pictures[currpic]); 
 
     $("#desc").text(texts[currpic]); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="gallery"> 
 
    <img id="myImage" src="https://gaytravel-destinations.s3.amazonaws.com/32491/united-states-beaches-and-scenery__small.jpg" border="0"/> 
 
</div> 
 
<div id="buttons"> 
 
    <input type="button" value="Previous" id="prev" /> 
 
    <input type="button" value="Next" id="next" /> 
 
</div> 
 
<p id = "desc">text</p>