В этой статье мы разберём как сделать бесконечный слайдер на JavaScript, будет очень интересно, и при этом не очень сложно.
Также мы делали уже слайдеры, вот они все:
Как работает бесконечный слайдер:
Перед тем как начать разрабатывать, давайте разберём кратко как он будет у нас работать.
Суть в том, что мы будем при нажатие рендерить следующий слайд и удалять предыдущий, при этом их возьмём из HTNL, это нужно для гибкости.
То есть мы будем брать что внутри одного слайда, и добавлять это в новый, это если кратко говоря.
Создание слайда:
Теперь перейдём к созданию слайда, он будет не очень сложный.
HTML:
Для начала посмотрим как строиться HTML, вот его вёрстка:
1 2 3 4 5 6 7 8 9 10 11 12 | <div id="viewport"> <div class="slider"></div> <div class="slide"><img src="./img/bled-1899264_1280.jpg" alt=""></div> <div class="slide"><img src="./img/cat-1455468_1280.jpg" alt=""></div> <div class="slide"><img src="./img/france-2773030_1280.jpg" alt=""></div> <div class="slide"><img src="./img/portrait-1462944_1280.jpg" alt=""></div> <div class="slide"><img src="./img/woman-1948939_1280.jpg" alt=""></div> </div> </div> <button class="next" id="next">Вперёд</button> <script src="./script.js"></script> |
Тут в целом всё понятно, внутри #viewport у нас храниться весь слайдер, потом чуть ниже у нас есть кнопка, при нажатие на которую будем менять слайд, и подключаем JS скрипт.
CSS:
Теперь покажу вам стили, не буду всё рассказывать, так как их не очень много и должно быть всё понятно.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | html, body { margin: 0; padding: 0; } #viewport { width: 100vw; height: 450px; overflow: hidden; } .slider { position: relative; width: 100%; height: 450px; } .slide { width: 100%; height: 450px; position: absolute; transition: 500ms; } .slide img { width: 100%; height: 450px; object-fit: cover; object-position: 0; } |
JavaScript:
Последние и самое главное, это JavaScript, c всё сложнее и интереснее.
Для начала возьмём нужные элементы и создадим нужные элементы, вот начало:
1 2 3 4 5 6 7 8 | // Берём ширину видимой части слайда let viewport = document.getElementById("viewport").offsetWidth; // Берём кнопку переключения на следующий слайд let btnNext = document.getElementById("next"); // Берём внутренности слайда let slides = document.querySelectorAll(".slide"); // Создаём массив с новыми слайдами let sliders = []; |
В начале мы берём ширину видимой части слайда, она нужна для его переключения, потом берём кнопку переключения и все слады которые есть, последние создаём массив для контента слайдов.
1 2 3 4 5 6 7 | // Цикл по слайдам for (let i = 0; i < slides.length; ++i) { // Добавляем изображение из слайда sliders[i] = slides[i].querySelector('img'); // Удаляем слайд slides[i].remove() } |
Здесь мы проходимся циклом по всем слайдам и добавляем в массив со изображениями или контентом для слайдов, в нашем случае изображение.
И удаляем все слайды, в так случае, если мы зайдём на страницу, то увидим пустоту, поэтому теперь нам нужна функция для отрисовки.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | // Номер слайда let step = 0; // Позиция сайда let offset = 0; // Функция для отрисовки сайда function drow() { // Создаём элемент слайда let slide = document.createElement("div"); // Добавляем касс slide новому элементу slide.classList.add("slide"); // Добавляем дочерний элемент контент слайда slide.appendChild(sliders[step]) // Даём позицию для слайда slide.style.left = offset * viewport + "px" // Добавляем слайд в контейнер слайдеров document.querySelector(".slider").appendChild(slide) // Если следующий слайд равен числу слайдеров, то if (step + 1 == slides.length) { // Включаем первый слайд step = 0; } else { // Иначе // Увеличиваем номер слайда на один step++ } // Назначаем позицию слайда offset = 1 } |
В начале кода мы объявляем две переменных, для обозначения номера слайда, которые надо отображать и offset, которая нужна для позиции.
Потом создаём функцию для отрисовки слайдов, в начале мы создаём новый элемент сайда, добавляем ему класс, и внутрь кладём наше изображение или контент которая сейчас должно отображаться.
Дальше назначаем позицию и кладём созданный элемент в контейнер для слайда, потом проверяем условие, если номер сайда больше, чем количество сладов, то присваиваем step ноль, иначе увеличиваем на один.
На этом отрисовку закончили, теперь нужно два раза вызвать эту функцию, чтобы отрисовать два первых слайда:
1 | drow(); drow() |
Теперь нужно чтобы при нажатие кнопки вперёд переключался слайд, для этого создадим функцию:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | // Создаём функцию для переключения function left() { // Запрещаем событие кнопки вперёд на клик btnNext.removeEventListener('click', left) // Берём слайды let slides2 = document.querySelectorAll(".slide") // Позиция let offset2 = 0; // Цикл для перемещения слайда for (let i = 0; i < slides2.length; i++) { // Меняем позицию слайда slides2[i].style.left = offset2 * viewport - viewport + "px" // Увеличиваем позицию offset2++; } // Ставим таймер setTimeout(function () { // Удаляем прошлый слайд slides2[0].remove() // Рисуем следующий слайд drow() // Назначаем событие на кнопку вперёд btnNext.addEventListener("click", left) }, 500) } |
Давайте разберём эту функцию, в начале мы запрещаем нажатие кнопки вперёд, пока идёт работа этой функции, это нужно для избегания багов при множественных кликах на кнопку.
Потом берём слайды которые у нас уже выведены, и назначаем переменную с позицией, дальше с помощью цикла проходимся по всем слайдам и меняем им позицию.
Последние включаем таймер на 500 миллисекунд, так потому что у нас анимация с такой скоростью работает, внутри него удаляем последний слайд, рисуем новый, и назначаем клик на кнопку.
Последние осталось вне этой функции объявить событие клика на кнопку:
1 | btnNext.addEventListener("click", left) |
Теперь всё должно работать вот что у нас получилось:
То есть всё работает, хотя ещё конечно стоит сделать индикатор на каком слайде находитесь или переключение в другую сторону, но это вы уже сами, так как дальше не чего сложного нет.
Вывод:
В этой статье мы разобрали как сделать бесконечный слайдер JavaScript, думаю всем было очень интересно и полезно.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 3,80
Загрузка...