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