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

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

11836

Создание слайдера, является важной частью проверки ваших знаний js. Если, вы не знаете как создавать слайдер на js, то вы попали на нужную вам страницу. В этой статье я вам расскажу, как создавать автоматический слайдер

Разметка 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)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</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);