Простой слайдер карусели: уберите класс из выбранного элемента и добавьте его к следующему брату - PullRequest
Новая
       46

Простой слайдер карусели: уберите класс из выбранного элемента и добавьте его к следующему брату

0 голосов
/ 31 октября 2019

Я хотел бы реализовать (в чистом Javascript, а не в jQuery) простой слайдер / карусель, чтобы каждый раз, когда я нажимал на изображение, оно скрывало его и показывало следующее изображение.

Следующий код почти работает, за исключением того, что когда мы достигаем конца, он не зацикливается. Я думал об использовании if ... в чехле, но это было бы не очень элегантно.

Как сделать эту карусельную петлю? 

Array.from(document.getElementsByClassName("imgslider")).forEach(function(element) {
    element.addEventListener('click', function(e) {  
        element.nextElementSibling.classList.toggle("visible");
        element.classList.toggle("visible");
    });
});
.imgslider { display: none; }
.visible { display: block; }
<div id="carousel">
<img src="https://www.w3schools.com/w3css/img_snowtops.jpg" class="imgslider visible">
<img src="https://www.w3schools.com/w3css/img_mountains.jpg" class="imgslider">
<img src="https://www.w3schools.com/w3css/img_forest.jpg" class="imgslider">
</div>

Примечание: если div #carousel содержит только одно изображение, при нажатии на него ничего не должно происходить.

1 Ответ

0 голосов
/ 31 октября 2019

Я нашел решение с помощью (element.nextElementSibling || element.parentNode.firstElementChild): когда нет «следующего» брата, тогда element.nextElementSibling равно null, а element.parentNode.firstElementChild дает первого брата. Это позволяет карусели зацикливаться в конце: 

Array.from(document.getElementsByClassName("imgslider")).forEach(function(element) {
    element.addEventListener('click', function(e) {  
        (element.nextElementSibling || element.parentNode.firstElementChild).classList.toggle("visible");
        element.classList.toggle("visible");
    });
});
.imgslider { display: none; }
.visible { display: block; }
<div id="carousel">
<img src="https://www.w3schools.com/w3css/img_snowtops.jpg" class="imgslider visible">
<img src="https://www.w3schools.com/w3css/img_mountains.jpg" class="imgslider">
<img src="https://www.w3schools.com/w3css/img_forest.jpg" class="imgslider">
</div>
...