Зацикленный слайдер

[kirilljsx]

Наверное одна из самых распространенных и первых задач с которой сталкиваются новички и конечно же я сам в самом начале свое пути.

И так начнем как зациклить слайдер.

Предположим у нас есть слайдер:

<div class="wrapper">
    <div class="track">
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
    </div>
    <div>
        <button id="prev"><-</button>
        <button id="next">-></button>
    </div>
</div>

В этой теме не будет готового слайда, а именно разбор как зациклить его что бы срабатывало переключение с первого на последний и наоборот.

И так нам надо сперва получить сами слайды и кнопки:

const slides = document.querySelectorAll('.slide');
// Напомню что так мы получаем NodeList 
const prev = document.getElementById('prev');
const next = document.getElementById('nex');
// Наши кнопки

Получили все необходимое теперь приступаем к самим функциям:

let currentIndex = 0
// Это переменная которая будет хранить текущее состояние/позицию слайда

function updateSlider() {
   // Эта функция отвечает за то как вы уже пролистываете свой слайд
   // через offset или через width тут уже ваша логика
}

С этим надеюсь все понятно, переходим к самому зацикливанию, начнем с prev:

prev.addEventListener('click', () => {
    if (currentIndex > 0) {
      currentIndex--;
    } else {
       currentIndex = slides.length - 1;
    }
})

И так посмотрите на условие if, если индекс больше 0 то происходит уменьшение индекса опять же в зависимости от вашей логики происходит переключение назад.
А вот в блоке else уже происходит наше “зацикливание” если индекс не больше 0 то мы хитренько присваиваем индексу последний элемент наших слайдов (currentIndex = slides.length - 1).

---

А теперь немного по другому в next:

next.addEventListener('click', () => {
    if (currentIndex < slides.length - 1) {
      currentIndex++;
    } else {
      currentIndex = 0;
    }
})

Обратим внимание именно на условия, все что делается внутри if, это стандартная логика которая проверяет что текущий индекс слайда (currentIndex) меньше индекса последнего слайда (slides.length - 1)
Но главное как раз находится в else, если условие if не совпадает то значение индекса присваивается 0.

Вот такими не хитрыми манипуляциями мы можем реализовать зацикленный слайдер.

[Aladdin]

Прикольно, хотелось бы с анимацией

[kirilljsx]

@Jspi Анимацию чего именно? Пролистывания или появления слайдера?
Просто если пролистывание, то можно в функции updateSlider() сделать через style примерно вот так:

function updateSlider() {
    const offset = -currentIndex * 100;
    track.style.transform = `translateX(${offset}%)`;
}

track - это наша обертка слайдов и при изменении currentIndex мы просто будет перемещать его состоянии translateX. Оно по сути и так будет анимирована, а для того что бы добавить плавность можно тому-же track добавить свойство transition.

Ну или сделать дополнительно как вариант что бы слайдер не через прокручивание переключался, а к примеру пропадал и появлялся с затуханием и плавным появлением.
Но это уже будет немного другая логика что самой функции updateSlider() что и css.

[Aladdin]

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

[kirilljsx]

@Jspi Немножко в css и немного в функции updateSlider()