Бесконечный слайдер на JavaScript

Бесконечный слайдер на чистом JavaScript
Метки: / /

В этой статье мы разберём как сделать бесконечный слайдер на JavaScript, будет очень интересно, и при этом не очень сложно.

Также мы делали уже слайдеры, вот они все:

Как работает бесконечный слайдер:

Перед тем как начать разрабатывать, давайте разберём кратко как он будет у нас работать.

Суть в том, что мы будем при нажатие рендерить следующий слайд и удалять предыдущий, при этом их возьмём из HTNL, это нужно для гибкости.

То есть мы будем брать что внутри одного слайда, и добавлять это в новый, это если кратко говоря.

Создание слайда:

Теперь перейдём к созданию слайда, он будет не очень сложный.

HTML:

Для начала посмотрим как строиться HTML, вот его вёрстка:

Тут в целом всё понятно, внутри #viewport у нас храниться весь слайдер, потом чуть ниже у нас есть кнопка, при нажатие на которую будем менять слайд, и подключаем JS скрипт.

CSS:

Теперь покажу вам стили, не буду всё рассказывать, так как их не очень много и должно быть всё понятно.

JavaScript:

Последние и самое главное, это JavaScript, c всё сложнее и интереснее.

Для начала возьмём нужные элементы и создадим нужные элементы, вот начало:

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

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

И удаляем все слайды, в так случае, если мы зайдём на страницу, то увидим пустоту, поэтому теперь нам нужна функция для отрисовки.

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

Потом создаём функцию для отрисовки слайдов, в начале мы создаём новый элемент сайда, добавляем ему класс, и внутрь кладём наше изображение или контент которая сейчас должно отображаться.

Дальше назначаем позицию и кладём созданный элемент в контейнер для слайда, потом проверяем условие, если номер сайда больше, чем количество сладов, то присваиваем step ноль, иначе увеличиваем на один.

На этом отрисовку закончили, теперь нужно два раза вызвать эту функцию, чтобы отрисовать два первых слайда:

Теперь нужно чтобы при нажатие кнопки вперёд переключался слайд, для этого создадим функцию:

Давайте разберём эту функцию, в начале мы запрещаем нажатие кнопки вперёд, пока идёт работа этой функции, это нужно для избегания багов при множественных кликах на кнопку.

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

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

Последние осталось вне этой функции объявить событие клика на кнопку:

Теперь всё должно работать вот что у нас получилось:

как сделать бесконечную прокрутку слайдера на JS

То есть всё работает, хотя ещё конечно стоит сделать индикатор на каком слайде находитесь или переключение в другую сторону, но это вы уже сами, так как дальше не чего сложного нет.

Вывод:

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

Подписываетесь на соц-сети:

Поделится:

Также рекомендую:

Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии