Меняйте sildes автоматически - PullRequest
Новая
       1

Меняйте sildes автоматически

0 голосов
/ 09 июня 2018

У меня есть код JavaScript для полного с silder со стрелками.Однако этот код JavaScript не заставляет слайды изменяться автоматически.Кто-нибудь может мне помочь с обновлением этого кода JS, так что div меняются автоматически, через несколько секунд.

Код JavaScript: 

let sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
current = 0;

// Clear all images
function reset() {
  for (let i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = "none";
  }
}

// Initialize slider
function startSlide() {
  reset();
  sliderImages[0].style.display = "block";
}

// Show previous slide
function slideLeft() {
  reset();
  sliderImages[current - 1].style.display = "block";
  current--;
}

// Show next slide
function slideRight() {
  reset();
  sliderImages[current + 1].style.display = "block";
  current++;
}

// Left arrow click
arrowLeft.addEventListener('click', function() {
  if (current === 0) {
    current = sliderImages.length;
  }
  slideLeft();
});

// Right arrow click
arrowRight.addEventListener('click', function() {
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
});

startSlide();

HTML-код: (у меня есть только два слайда) 

<div class="wrap">
  <!-- slider arrow -->
  <div class="arrow" id="arrow-left">
    <img class="zoom" src="images/icon_arrow_left.png" alt="arrow-left">
  </div> <!-- end slider arrow -->

  <div id="slider">
    <div class="slide slide1">
      <div class="slide-content">
        <h2>WELCOME TO EMS STUDIO</h2>
        <p class="italic">Together we lift your training to the new 
levels</p>
        <button class="slider-btn"><a href="">Read More</a></button> <!-- 
slider button -->
      </div>
    </div>

    <div class="slide slide2">
      <div class="slide-content">
        <h2>EMS TRAINING FROM xBODY</h2>
        <p class="italic">Get your dream body with 30 minutes of exercise, 
only twice a week!</p>
        <button class="slider-btn"><a href="">Read More</a></button> <!-- 
slider button -->
      </div>
    </div>
  </div>

  <!-- slider arrow -->
  <div class="arrow" id="arrow-right">
    <img class="zoom" src="images/icon_arrow_right.png" alt="arrow-right">
  </div> <!-- end slider arrow -->
</div>

<script type="text/javascript" src="scripts/slider.js"></script>

Спасибо!

1 Ответ

0 голосов
/ 09 июня 2018 

let sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
current = 0;

// Clear all images
function reset() {
  for (let i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = "none";
  }
}

// Initialize slider
function startSlide() {
  reset();
  sliderImages[0].style.display = "block";
}

// Show previous slide
function slideLeft() {
  reset();
  sliderImages[current - 1].style.display = "block";
  current--;
}

// Show next slide
function slideRight() {
  reset();
  sliderImages[current + 1].style.display = "block";
  current++;
}

// Left arrow click
arrowLeft.addEventListener('click', function() {
  if (current === 0) {
    current = sliderImages.length;
  }
  slideLeft();
});

// Right arrow click
arrowRight.addEventListener('click', function() {
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
});
// Interval for slider
var a = function(){
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
}
setInterval(a, 2000);

startSlide();
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
	<div class="wrap">
  <!-- slider arrow -->
  <div class="arrow" id="arrow-left">
    <img class="zoom" src="images/icon_arrow_left.png" alt="arrow-left">
  </div> <!-- end slider arrow -->

  <div id="slider">
    <div class="slide slide1">
      <div class="slide-content">
        <h2>WELCOME TO EMS STUDIO</h2>
        <p class="italic">Together we lift your training to the new 
levels</p>
        <button class="slider-btn"><a href="">Read More</a></button> <!-- 
slider button -->
      </div>
    </div>

    <div class="slide slide2">
      <div class="slide-content">
        <h2>EMS TRAINING FROM xBODY</h2>
        <p class="italic">Get your dream body with 30 minutes of exercise, 
only twice a week!</p>
        <button class="slider-btn"><a href="">Read More</a></button> <!-- 
slider button -->
      </div>
    </div>
  </div>

  <!-- slider arrow -->
  <div class="arrow" id="arrow-right">
    <img class="zoom" src="images/icon_arrow_right.png" alt="arrow-right">
  </div> <!-- end slider arrow -->
</div>
</body>
</html>

Я добавил в конце вашего скрипта комментарий.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...