0

Необходимо осуществить возможность смены скорости слайдов. Попыталась сделать через ползунок, но не работает. Подскажите ошибку или другой способ реализации. Сокращенная версия кода:

var slides = document.getElementsByClassName('slider__block');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 5000);

function timeSlide() {
  var time = document.getElementById('time');
  var interval = document.getElementById('result');
  interval.innerHTML = time.value;
  interval = time.value;
  setInterval(nextSlide, interval);
  console.log(interval);
}

function nextSlide() {
  goToSlide(currentSlide + 1);
}

function goToSlide(n) {
  slides[currentSlide].className = 'slider__block';
  currentSlide = (n + slides.length) % slides.length;
  slides[currentSlide].className = 'slider__block showing';
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
.slider {
  width: 200px;
  height: 100px;
  position: relative;
  margin: 0 auto;
}
.slider__block {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.slider__block:nth-child(1) {
  background: #ccc;
}
.slider__block:nth-child(2) {
  background: red;
}
.slider__block:nth-child(3) {
  background: green;
}
.showing {
  z-index: 2;
}
.nav {
  color: black;
  font-size: 18px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.slider__nav_prew {
  left: 5px;
}
.slider__nav_next {
  right: 5px;
}
.block {
  display: table;
  margin: 20px auto;
}
<div class="slider">
  <ul class="slider__content">
    <li class="slider__block showing"></li>
    <li class="slider__block"></li>
    <li class="slider__block"></li>
  </ul>
</div>

<div class="block">
  <label for="time">На данный момент скорость смены слайда: <span id="result">5000 </span> ms</label>
  <br>
  <input id="time" type="range" min="1000" max="20000" step="1000" value="5000" oninput="timeSlide()">
</div>

1 ответ 1

2

Сначала отменяйте выполнение setInterval с помощью метода clearInterval, а потом запускайте заново:

function timeSlide() {
    var time = document.getElementById('time');
    var interval = document.getElementById('result');
    interval.innerHTML = time.value; 
    interval = time.value;
    clearInterval(slideInterval);
    slideInterval = setInterval(nextSlide, interval);
    console.log(interval);
}
1
  • Все работает. Спасибо большое. 15 фев 2017 в 10:39

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.