Cześć wszystkim chcę zrobić bardzo prosty slider składający się z trzech zdjęć. Tylko mam mały problem mianowicie nie za bardzo wiem jak zrobić pętle żeby po każdym kliknięciu iteratot zwiększał się o 1 i dawał następne zdjęcie:
1. Fragment kodu HTML:
<div class="pictures-chair">
<div class="big-chair all-chairs"><img src="images/black_chair.png" /></div>
<div class="orange-chair all-chairs"><img src="images/orange.png" /> </div>
<div class="red-chair-nav all-chairs"><img src="images/red.png" /></div>
</div>
2. JS
var nextBtn = document.querySelector('.char-two');
var prevBtn = document.querySelector('.char-one');
var bigChair = document.querySelector('.big-chair');
var orangeChair = document.querySelector('.orange-chair');
var redChair = document.querySelector('.red-chair-nav');
var picturesChair = document.querySelectorAll('.all-chairs');
for (var i = 0; i < picturesChair.length; i++) {
picturesChair[i]
}
bigChair.style.visibility = 'visible';
orangeChair.style.visibility = 'hidden';
redChair.style.visibility = 'hidden';
nextBtn.addEventListener('click', function(event){
var picturesChair = document.querySelectorAll('.all-chairs');
var counter = 0;
for (var i = 0; i < picturesChair.length; i++) {
counter =+ 1;
picturesChair[i];
}
});
Z góry dziękuje za każdą pomoc :)