@salgiri

Как организовать смену позиций слайдами при клике?

Доброго дня! Верстаю слайдшоу и столкнулся со следующей проблемой:

Есть слайдер, состоящий из 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');
}
  • Вопрос задан
  • 34 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы