Доброго дня! Верстаю слайдшоу и столкнулся со следующей проблемой:
Есть слайдер, состоящий из 3 слайдов (может быть и больше, может и меньше), есть главный слайд, который находится слева и занимает большую площадь и есть два "свернутых". Необходимо, чтобы при клике на один свернутых слайдов он становился развернутым, передвигается в левый край, тот же, что был активным перемещается на место последнего, т.е. в самый правый край. Соответственно, если кликнуть на второй слайд, то он становится первым, первый становится третьим, а третий передвигается на место второго, если кликнуть на третий, то он станет первым, а первый перейдет на его место. Сейчас смог реализовать схему по которой если кликнуть на второй слайд, к примеру, то основной просто встает на его место. На данный момент HTML и JS выглядят так:
HTML:
<div id="slider">
<div class="slide active" href="#">
<img src="/photos/slide1-2.jpg" alt="">
<div class="card">
<i>Новая коллекция</i>
<h1>Hurriya</h1>
<button>Перейти к коллекции</button>
</div>
</div>
<div class="slide inactive" href="#">
<img src="/photos/slide2.jpg" alt="">
<div class="card">
<i>Классическая коллекция</i>
<h1>Borzline</h1>
<button>Перейти к коллекции</button>
</div>
</div>
<div class="slide inactive" href="#">
<img src="/photos/slide3.jpg" alt="">
<div class="card">
<i>Хит продаж</i>
<h1>Heroes</h1>
<button>Перейти к коллекции</button>
</div>
</div>
</div>
JS:
var slides = document.getElementsByClassName("slide");
for (var i = slides.length; i--;) {
slides[i].addEventListener('click', checkMulti);
};
function checkMulti(event) {
event.preventDefault();
for (var i = slides.length; i--;) {
slides[i].classList.remove('active');
slides[i].classList.add('inactive');
};
this.classList.toggle('inactive');
this.classList.toggle('active');
}