В этой статье мы будем делать самый простой слайдер на чистом JavaScript, и подойдёт статья только для самых начинающих JavaScrpt разработчиков.
Ещё есть статья где делаем более сложный и продвинутый слайдер: Делаем продвинутый слайдер на чистом javascript, прочитайте, если вам кажется слайдер из этой статьи кажется простым.
HTML:
Для начало нам нужно сделать подходящий HTML файл.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Слайдер</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="slides"> <img src="img/portrait-1462944_1280.jpg" class="block" alt=""> <img src="img/bled-1899264_1280.jpg" alt=""> <img src="img/cat-1455468_1280.jpg" alt=""> <img src="img/woman-1948939_1280.jpg" alt=""> <img src="img/france-2773030_1280.jpg" alt=""> </div> <button class="btnRight">Right</button> <script src="script.js" class="btnRight"></script> </body> </html> |
Объяснять досконально я не буду, так как, тут всё понятно и вы уже должны знать сам язык HTML, если уже разрабатываете на JavaScript, но скажу, что <div class="slides"> это контейнер который содержит в себе картинки.
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .slides { width: 1000px; height: 500px; } img { display: none; } .block { display: block; object-fit: cover; width: 100%; height: 100%; } |
Как видите файл вообще очень маленький, мы можем понять что все картинки будут скрыты, размер слайда будет, в ширину 1000 пикселей и в высоту 500 пикселе.
JavaScript:
Суть программы будет в том что при нажатие на кнопку Right будет удалятся класс block за счёт чего скрывается картинка а следующему элементу добавляется класс block.
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 | // Берём кнопку вперёд let btnRight = document.querySelector(".btnRight"); // Берём слайды let slides = document.querySelectorAll("img"); // Объявляем переменную i let i = 0; // Объявляем событие нажатия на кнопку вперёд btnRight.addEventListener("click", function () { // Увеличиваем переменную i ++i // Условие если переменная i больше или равна количеству слайдов if (i >= slides.length) { // Удаляем класс block предыдущему слайду slides[i-1].classList.remove("block"); // Присваиваем переменной i ноль i = 0; // Добавляем класс block следующему слайду slides[i].classList.add("block"); } else { // Иначе // Удаляем класс block предыдущему слайду slides[i-1].classList.remove("block"); // Добавляем класс block следующему слайду slides[i].classList.add("block"); } }) |
Таким же образом можно сделать что бы картинки менялись в другом направление или, если добавит таймер то тогда картинки будут меняться автоматически, но это уже вы сами сделаете, потому что это очень просто, да и программист должен уметь разбираться.
Вывод:
Здесь я написал как сделать очень простой слайдер, эта стать скорей подойдёт совсем начинающим JavaScript разработчиком, чем профессионалам. В будущем я напишу статья как сделать сложный слайдер.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 5,00
Загрузка...