Ich versuche, einen Bild-Slider mit den Steuerelementen "Next" und "Previous" zu erstellen. Als Nächstes sollte das Bild mit einer negativen linken Randeigenschaft nach links verschoben werden, um das zweite Bild sichtbar zu machen. Alle Listenelemente, die einzelne Bilder enthalten, werden auf display: inline-block gesetzt, sodass jedes Listenelement nebeneinander stehen kann, anstatt zu stapeln.Javascript Image Slider funktioniert nicht richtig
Ich fand jedoch heraus, dass, wenn das erste Bild nach links rutscht, es immer noch etwas davon zeigt, während es das zweite Bild zeigt, und so weiter und weiter, alles rutscht, aber nie ganz. Die Entfernung, die sie gleiten, ist gleich der Breite des Bildes.
Auch wenn ich zum letzten Bild komme und auf Weiter klicke, sollte es zurück zum ersten Bild gehen, das Problem ist, dass es jedes Bild auf dem Weg zum ersten Bild anzeigt.
window.onload = function() {
var nextBtn = document.getElementsByClassName("nextBtn")[0],
prevBtn = document.getElementsByClassName("prevBtn")[0];
var i = 0;
var imgList = document.querySelectorAll(".slide");
var slideLength = imgList.length;
var lastchild = imgList[slideLength - 1];
nextBtn.addEventListener("click", Next, false);
prevBtn.addEventListener("click", Previous, false);
function Next() {
console.log(slideLength)
imgList[i].style.marginLeft = "-600px";
if (imgList[i].classList.contains("active")) {
imgList[i].classList.remove("active");
}
if (imgList[i] !== lastchild) {
i++;
}
else if (imgList[i] === lastchild) {
i = 0;
for (var j = 0; j < slideLength; j++) {
imgList[j].style.marginLeft = "0";
}
}
imgList[i].classList.add("active");
}
function Previous(e) {
console.log(i);
if (i !== 0) {
imgList[i - 1].style.marginLeft = "0";
i--;
console.log(i);
}
else {
console.log(i);
}
}
}ul{
width: 100%;
height: 350px;
border: solid 3px white;
margin:100px auto;
overflow: hidden;
}
li{
display:inline-block;
position: relative;
transition: all 1s cubic-bezier(1,-0.01, 0, 1.13);
list-style: none;
}
li img{
width:600px;
height:350px
}
.slide h2{
position: absolute;
bottom:80px;
text-align: center;
margin: 0 auto;
left: 250px;
color: #fff;
font-size: 4em;
font-weight: 900;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
\t <div class="container">
\t \t <ul class="slide-wrapper">
\t \t \t <li class="slide active">
\t \t \t \t <img src="http://placehold.it/350x150" alt="">
\t \t \t \t <h2>1</h2>
\t \t \t </li>
\t \t \t <li class="slide">
\t \t \t \t <img src="http://placehold.it/350x150" alt="">
\t \t \t \t <h2>2</h2>
\t \t \t </li>
\t \t \t <li class="slide">
\t \t \t \t <img src="http://placehold.it/350x150" alt="">
\t \t \t \t <h2>3</h2>
\t \t \t </li>
\t \t \t <li class="slide">
\t \t \t \t <img src="http://placehold.it/350x150" alt="">
\t \t \t \t <h2>4</h2>
\t \t \t </li>
\t \t \t <li class="slide">
\t \t \t \t <img src="http://placehold.it/350x150" alt="">
\t \t \t \t <h2>5</h2>
\t \t \t </li>
\t \t </ul>
\t </div>
<!--<div class="test">
</div>-->
\t <button class="nextBtn">Next</button>
\t <button class="prevBtn">Previous</button>Wie kann ich diese Arbeit auch streng mit Vanille Javascript? Hier ist der Link zum jsfiddle. Allerdings scheint es dort überhaupt nicht zu funktionieren.
Können Sie eine JS Geige davon erstellen und teilen? Ich werde dir auf jeden Fall helfen. – Abhinav
@Abhinav Ich habe die Frage mit einem Link zum jsfiddle aktualisiert. – ibnhamza
Fixed fiddle link: https://jsfiddle.net/a2bk4bwu/3/ Btw, mehr CSS-Problem als js. Und auch in Bezug auf dieses: "Wenn ich auch zum letzten Bild komme und auf das nächste Bild klicke, sollte es zum ersten Bild zurückkehren, das Problem ist, dass es jedes Bild auf dem Weg zum ersten Bild anzeigt." Wenn ja, müssen Sie eine komplett andere Logik für die Folien anwenden - und dann css entsprechend ändern – sinisake