В этой статье я постараюсь объяснить, как сделать очень простой и красивый слайдер на чистом JavaScript, также в конце будет можно скачать файлы, чтобы доработать или использовать этот слайд, но всё таки рекомендуется попробовать самому его сделать.
Как это будет работать:
Как это будет работать, очень просто, у нас будет два очень важных блока, первый это видимый блок, внутри его будет сам слайдер, суть заключается в том, что первый блок будет ограничивать слайдер, чтобы не было горизонтальной прокрутки, а сам слайдер будет горизонтальным.
Сам же код, будет просто увеличивать или уменьшать переменную при нажатие кнопки назад, вперёд, и умножать её на размер видимого блока, получившейся значение будем использовать для назначения позиции элемента слайдер, как то так и будет работать наша программа.
Если вам не понятно, то во время разработки я думаю вы всё поймёте.
Ещё посмотрите статью «Как сделать простой слайдер на чистом JavaScript», но она совсем для новичков.
Разработка слайдера:
HTML:
С теорией не много разобрались, теперь сама разработка, начнём мы с HTML, в нём создадим видимый блок с айди «viewport», внутри него будет слайдер с классом «slider», и вот уже внутри слайдера будут картинки, также ниже должен быть индикаторы какой сейчас слайдер отображается и конечно кнопки вперёд, назад.
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 31 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Сладер на чистом JS</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div id="viewport"> <div class="slider" style="left: 0"> <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> <div id="viewSlider"> <div class="viewSlide"></div> <div class="viewSlide"></div> <div class="viewSlide"></div> <div class="viewSlide"></div> <div class="viewSlide"></div> </div> <button class="prev" id="prev">Назад</button> <button class="next" id="next">Вперёд</button> <script src="./script.js"></script> </body> </html> |
Рассказывать что к чему здесь, я не буду, так как, если вы читаете эту статью должны знать HTML, но самое главное для слайдера, это в элемент с классом «slider» добавить атрибут «style» и значением left: 0, это нужно для того чтобы срабатывала анимация или точнее CSS переход.
CSS:
Теперь CSS, я не буду подробно объяснять что к чему, единственное скажу, что будет использованы flexbox для слайда и CSS функция calc(), для тех кто не знает, она даёт возможность рассчитать значения свойств 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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | html, body { margin: 0; padding: 0; } #viewport { width: 100vw; height: 450px; overflow: hidden; } .slider { position: relative; transition: 500ms; width: calc(100% * 5); height: 450px; display: flex; justify-content: start; flex-wrap: nowrap; } .slide { width: 100%; height: 450px; } .slide img { width: 100%; height: 450px; object-fit: cover; object-position: 0; } #viewSlider { width: calc(30px * 5); display: flex; justify-content: space-between; } .viewSlide { width: 20px; height: 20px; background-color: red; } |
Опять же, я нечего не буду здесь объяснять, так как, вы уже должны это всё знать, только то, что все картинки должны быть равны ширине и высоте видимого блока.
JavaScript:
Теперь пожалуй самое главное, это сам скрипт, вот его мы рассмотрим подробно.
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | // Получаем видимую часть слайда let viewport = document.getElementById("viewport").offsetWidth; // Получаем кнопку вперёд let btnNext = document.getElementById("next"); // Получаем кнопку назад let btnPrev = document.getElementById("prev"); // Получаем элемент со всеми слайдами let slider = document.querySelector("div.slider"); // Получаем элементы показа слайда let viewSliders = document.querySelectorAll(".viewSlide"); // Объявляем переменную номера слайда let viewSlide = 0; // Назначаем цвет индикатор слайда зелёный viewSliders[0].style.backgroundColor = "green"; // Обработка клика на кнопку вперёд btnNext.addEventListener("click", function () { // Делаем индикатор слайда красный viewSliders[viewSlide].style.backgroundColor = "red"; // Условие, если номер слайда меньше четырёх if (viewSlide < 4) { // Если верно то // Увеличиваем номер слайда на один viewSlide++; } else { // Иначе // Номер слайда равен нулю viewSlide = 0; } // Закрашиваем индикатор слайда в зелёный viewSliders[viewSlide].style.backgroundColor = "green"; // Меняем позицию всего слайда slider.style.left = -viewSlide * viewport + "px"; }); // Обработка клика на кнопку назад btnPrev.addEventListener("click", function () { // Делаем индикатор слайда красный viewSliders[viewSlide].style.backgroundColor = "red"; // Условие, если номер слайда больше нуля if (viewSlide > 0) { // Если верно то // Уменьшаем номер слайда viewSlide--; } else { // Иначе // Номер слайда равен четырём viewSlide = 4; } // Закрашиваем индикатор слайда в зелёный viewSliders[viewSlide].style.backgroundColor = "green"; // Меняем позицию всего слайда slider.style.left = -viewSlide * viewport + "px"; }); |
Давайте теперь всё по полочкам разберём, сначала мы просто берём нужные нам элементы, из этого всего, пожалуй самое интересное будет, когда мы берём индикаторы слайда, там создаётся массив из всех индикаторов.
Теперь, почему же значение номера отображаемого слайда, начинается с нуля, это нужно, во первых, когда мы будем присваивать позицию, к примеру, когда будем умножать на ноль, то соответственно, позиция будет равна нулю и показывается первый слайд, если на один, то первый слайд скроется и покажется второй, если их ширина равна ширине видимого блока, во вторых, это нужно для покраски индикаторов, так как, там хранится массив, а отсчёт массивов начинается с нуля.
Потом программа закрашивает первый индикатор в зелёный цвет, можно сделать это через CSS, но я решил так.
Дальше идёт событие клика на кнопку вперёд, сначала он закрашивает индикатор, потом проверяет, номер слайда меньше 4, если да, то тогда номер слайда увеличивается на 1, если нет, то становится равен нулю, делам индекс зелёным и умножаем номер слайда на ширину видимого блока и присваиваем это значение к позиции left, тем самым двигая слайдер.
Про назад я не буду рассказывать, так как алгоритм не меняется, а только условии.
Вывод:
Вот такой слайдер получился на чистом JavaScript, надеюсь вам эта статья помогла, также файлы вы можете скачать.
Конечно, можно ещё его доработать, к примеру, при нажатие на индикатор, сразу перемешаться на слайд этого индикатора, но не стал этого делать, так как программист должен сам уметь разбираться в чужом коде и писать свой, поэтому если вам что то нужно доработать, то скачиваете или ещё лучше переписывание мой код и дополняйте его, тем чего вам не хватает.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 4,00
Загрузка...