Автоматический слайдер на JavaScript

Разметка HTML
<div class="slideshow"> <div class="mySlides fade"> <img src="../img/1.png" style="width:100%"> </div> <div class="mySlides fade"> <img src="../img/2.jpg" style="width:100%"> </div> <div class="mySlides fade"> <img src="../img/3.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div>
В этом коде мы создали класс "slideshow" где мы поместили свои фото. Класс prev отвечает за перелистывание слайдера назад, чере стрелку > А класс next отвечает за перелистывание следующего слайдера через стрелку < Класс dot - это кружки внизу, которые тоже отвечают за перелистывание слайда назад и вперед. Чтобы кнопки эти работали нужно применить JavaScript.
Css
Дальше, мы уже применяем стили для этого слайдера.
* { box-sizing: border-box; } .slideshow { max-width: 1000px; position: relative; margin: auto; } .mySlides { display: none; } .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } .next { right: 0; border-radius: 3px 0 0 3px; } .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } .dot { cursor:pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; }
В этих стилях мы сделали слайдер адаптивным, используя max-width: 1000px Мы описали, как будет выглядеть слайдер.Нам осталось добавить эффекты при переключение на другой слайдер и добавить JavaScript.
Эффекты Css
Теперь добавляем эффекты при перелистывание слайда.
.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} }
В элементе .fade через animation-name мы дали название анимации fade, дальше в коде мы указали, что при переходе с одного слайда на другой, у нас прозрачность будет увеличиваться с 0.4 до 1.
JavaScript
Теперь приступает к JavaScript.
var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); }
У функции plusSlides мы добавили аргумент и дальше мы произвели присваивание со сложением у элемента showSlides и slideIndex. У нас получилось, что showSlides = slideIndex + аргумент n
function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active",""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; }
Для того, чтобы слайдер был автоматическим надо ввести этот код
var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); for (i = 0; i < slides.length; i++ { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) { slideIndex = 1; } slides[slideIndex-1].style.display = "block"; setTimeout(showSlides, 3000);