Простой слайдер изображений на Vue.js

В этой заметке мы рассмотрим разработку простого слайдера на Vuejs. Принципов построения слайдера достаточно много, но я выбрал (на мой взгляд) самый удобный вариант для будущих улучшений и адаптации под свои нужды.

В структуре слайдера у нас присутствует основной контейнер slider, который содержит в себе так называемое тело slider__body, а уже в самом slider__body располагаются слайды с контентом slider__slide (в нашем случае — просто изображения).

Мы получаем список изображений из переменной sliderList и циклом выводим в элемент slider__slide, присваивая изображение в background-image. Так же у нас имеются дополнительные переменные для хранения состояния слайдера.

При иницилизации слайдера мы узнаем длину одного слайда и общее количество слайдов. Длина используется для вычисления «шага» при переходе с одного слайда на другой, а общее количество для создания «стопов» при достижении последнего слайда.

Тело слайдера slider__body перемещается по slider с помощью изменения положения left, тем самым сдвигая слайды, которые выстроены в нем горизонтально.

На сами кнопки «назад/вперед» мы вешаем функции, которые прибавляют/вычитают из sliderActive одну единицу и проверяют не вышли ли мы за стопы. После чего вызывают уже метод openSlide.

Вот и все, остальное за нас делает VueJs, который в реальном времени поставляет измененные значения в верстку.

Пример полноценного кода со стилями: