В этой статье будет показано как сделать простой слайдер на JQuery, думаю вам будет полезно и интересно.
Также посмотрите статью: Делаем продвинутый слайдер на чистом javascript, так как, именно на базе кода из неё, был сделан слайдер здесь, только добавили JQuery
Создание слайдера на JQuery:
Сначала разберём суть работы нашего слайдера, мы просто будим при нажатие кнопки менять позицию слева, тем самым прокручивая слайдер.
HTML:
Теперь перейдём, тут не чего сложного нет, вот файл.
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 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Сладер на JQuery</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" >Назад</button> <button class="next">Вперёд</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="./script.js"></script> </body> </html> |
Как видите обычный HTML, тут только можно выделить три момента, первый, это то, что есть два блока, в одно содержится картинки слайда, в другом какая картинка сейчас показывается.
Во вторых, мы подключаем три файла, файл стилей, почти в самом верху и два скрипта, первый скрипт JQuery, второй, это то, где вся логика слада будет прописываться.
Если вы не знаете как подключить JQuery, то посмотрите статью: Что такое JQuery и как его подключить.
CSS:
С 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 | html, body { margin: 0; padding: 0; } #viewport { width: 100vw; height: 450px; overflow: hidden; } .slider { position: relative; 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; } |
Главное что тут можно отметить, это использование FlexBox, в остальном тут обычный CSS.
Если вам тут что то не понятно, то посмотрите наш учебник по CSS.
JavaScript:
Теперь перейдём к самому главному, это коду для слайдера на JavaScript, сначала мы объявим нужные переменные и возьмём нужные элементы.
1 2 3 4 5 6 | let viewport = $("#viewport").width(); // Ширина видимой части let slider = $("div.slider"); // Весь слайдер let viewSliders = $(".viewSlide"); // Показатели какой сейчас слайд показывается let viewSlide = 0; // Номер слайда viewSliders[viewSlide].style.backgroundColor = "green"; |
Давайте не много разберём, сперва берём ширину всей видимой части, он потом пригодится во время изменения позиции, дальше берём весь слайдер.
Потом берём массив элементов индикаторов, какой сейчас слайд показывается, и создаём переменную для номера слайдера, также назначаем для первого элемента индикатора зелённый цвет.
Теперь перейдём к самому главному, это переключение слайда.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // Событие клика на кнопку вперёд $(".next").click(function () { // Делаем индикатор слайда который сейчас отображается красным viewSliders[viewSlide].style.backgroundColor = "red"; // Проверяем, если номер слайда который сейчас показывается меньше 4 if (viewSlide < 4) { // То номер слайда увеличивается на 1 viewSlide++; } else { // Иначе он будет равен 0 viewSlide = 0; } // Делаем индикатор слайда зелёным viewSliders[viewSlide].style.backgroundColor = "green"; // Задаём слайду значение позиции left через анимацию slider.animate({'left': -viewSlide * viewport + "px"}, {'duration': 500}) }); |
Сначала в этом коде мы обрабатываем клик на кнопку вперёд, там мы делаем индикатор, который сейчас зелёного цвета, красным цветам и дальше условие, там проверяем номер слайда, если он меньше нужного числа, то номер увеличиваем, а иначе присваиваем ноль.
Потом меняем цвет на нового индикатор на заселённый и переключаем слайдер, делаем это за счёт функции .animate(), которая задаёт CSS с анимацией.
Для переключения слайдов назад, используется подобны алгоритм, только условие меняется.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // Обработка события клик $(".prev").click(function () { viewSliders[viewSlide].style.backgroundColor = "red"; // Проверяем что номер слада больше нуля if (viewSlide > 0) { То уменьшаем номер слада на один viewSlide--; } else { // Иначе присваиваем четыре viewSlide = 4; } // Делаем индикатор зелёным viewSliders[viewSlide].style.backgroundColor = "green"; // Меняем позицию left с анимацией slider.animate({'left': -viewSlide * viewport + "px"}, {'duration': 500}) }); |
Как видит, действительно разницы нет, только условие, и теперь всё должно работать, слайдер готов.
Также если вы более менее знаете JQuery, наверное заметили, что мы не использовали функции JQuery для изменения цвета индикатора, это потому что мы их хранили в массиве, а в массиве нельзя менять стили через него.
Вывод:
В этой статье было показано как сделать простой слайдер на JQuery, надеюсь вам было полезно, единственное, здесь возможно не сильно раскрыта тема работы слайдера, но вы можете скачать файлы и понять самим как он работает и посмотреть предыдущую статью, ссылка которой в самом начале.
Подписываетесь на соц-сети:
Оценка:
Загрузка...