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

Question

[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');
}

Comments

[Сергей Сергей]

То есть, нужно сохранять порядок следования слайдов с зацикливанием?

1, 2, 3, 4, 5, 6

3, 4, 5, 6, 1, 2

5, 6, 1, 2, 3, 4

[salgiri]

Сергей Сергей, я вижу решение примерно в таком направлении: убрать классы .active и .inactive, заменив их на три: slideone, slidetwo, slidethree, среди которых slideone будет выполнять функцию "active", а slidetwo и slidethree разделят функцию inactive, но закрепят за собой порядок следования. Слайдер строится через flexbox, соответственно каждый класс будет иметь свой order. Соответственно, при клике на slidetwo он получает класс slideone, slidethree получает класс slidetwo, а slideone становится slidethree. При клике на slidethree он просто меняется местами со слайдом slideone. В принципе, можно ограничить общее количество слайдов тремя, но как эту логику выстроить в Javascript коде не понимаю.

[Сергей Сергей]

Короче, я не знаю, как эта задача будет решена в будущем. Я всем предлагаю переходить на css-переменные