Diashow Fehlerbehebung mit Javascript

Question

Ich mache eine Diashow und habe einige Probleme mit dem Javascript. Wenn ich einmal richtig klicke funktioniert es gut und dann wenn ich links klicke klappt es auch, aber wenn ich wieder rechts klicke sollte es einfach zum nächsten Bild gehen aber es überspringt es und geht zum nächsten. Wer kennt die Lösung?

$('#droite').click(function() { 
 
    if (photo == 4) {} else { 
 
    $('#plateau-gallerie').animate({ 
 
     left: (-300 * photo) + 'px' 
 
    }, 500); 
 
    photo++; 
 
    } 
 
}); 
 
$('#gauche').click(function() { 
 
    if (photo == 1) {} else { 
 
    $('#plateau-gallerie').animate({ 
 
     left: (-300 * (photo - 2)) + 'px' 
 
    }, 500); 
 
    photo--; 
 
    } 
 
});

#gallerie { 
 
    width: 60vw; 
 
    height: 300px; 
 
    background-color: #a9a9a9; 
 
    border-radius: 10px; 
 
    border: 3px solid #999; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
#plateau-gallerie { 
 
    width: 1780px; 
 
    float: left; 
 
    top: 50px; 
 
    position: absolute; 
 
} 
 

 
#gallerie img { 
 
    height: 200px; 
 
    margin: 0 0px 0 80px; 
 
    float: left; 
 
} 
 

 
.bouton { 
 
    position: absolute; 
 
    height: 100px; 
 
    width: 60px; 
 
    top: 100px; 
 
    background-color: #444; 
 
    opacity: 0.7; 
 
    cursor: pointer; 
 
    z-index: 99; 
 
    font-size: 3em; 
 
} 
 

 
.bouton:hover { 
 
    background-color: #222; 
 
} 
 

 
#gauche{ 
 
\t left:15px; 
 
} 
 

 
#droite{ 
 
\t right:15px; 
 
}

<section id="gallerie"> 
 
    <button class="bouton" id="gauche"><</button> 
 
    <section id="plateau-gallerie"> 
 
    <img src="img/pc-gallerie.jpg" alt="ordinateur"> 
 
    <img src="img/pc-gallerie.jpg" alt="ordinateur"> 
 
    <img src="img/pc-gallerie.jpg" alt="ordinateur"> 
 
    <img src="img/pc-gallerie.jpg" alt="ordinateur"> 
 
    <img src="img/pc-gallerie.jpg" alt="ordinateur"> 
 
    <img src="img/pc-gallerie.jpg" alt="ordinateur"> 
 
    </section> 
 
    <button class="bouton" id="droite">></button> 
 
</section>

Jeder bekam eine Idee, warum das so ist?

Answer 1

Ich bin nicht in der Lage, das Verhalten, das Sie beschreiben, zu reproduzieren. Ich habe eine Geige (Geige id eozpp6vo) mit Ihrem Code erstellt und die Galerie scheint wie erwartet zu funktionieren.

Answer 2

Ich habe das Skript ändern, die Logik der Schieber nach links und

Ändern der Bildbreite auf 300 Pixel rechts ändern, und richten Sie sie

#gallerie img { 
    height: 200px; 
    float: left; 
    width:300px; 
    text-align: center; 
} 

Hier zum Zentrum ist die js Geige https://jsfiddle.net/bqg2aheh/

$('#left').click(function() { 
    if (!(photo < 0)) { 
    photo--; 
    $('#plateau-gallerie').animate({ 
     left: (-300 * (photo)) + 'px' 
    }, 500); 
    console.log(photo + ' ' + (-300 * photo)); 
    } 
}); 

$('#right').click(function() { 

    if (!(photo > 5)) {  
    photo++; 
    $('#plateau-gallerie').animate({ 
     left: (-300 * photo) + 'px' 
    }, 500); 
    console.log(photo + ' ' + (-300 * photo)); 
    } 
}); 

Bitte ignorieren Sie den Stil