Добрый день!
Перепробовал все известные мне варианты для решения проблемы, но решить не удалось.
Задача запускать слайдер при наведении курсора, останавливать при покидании.
Все сделать кое-как удалось, но при повторном наведении слайды начинают прыгать, а нужно чтобы просто продолжался показ с той же скоростью.
Помогите, пожалуйста, с решением.
Ссылка на
jsfiddle
var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var d = 0;
var para = document.getElementById("slides");
para.addEventListener("mouseover", function(event) {
d = 0;
var slideInterval = setInterval(nextSlide,2000);
function nextSlide() {
if (d == 1) {
return true;
} else{
slides[currentSlide].className = 'slide';
currentSlide = (currentSlide+1)%slides.length;
slides[currentSlide].className = 'slide showing';
};
}
});
para.addEventListener("mouseout", function(event) {
d = 1;
});
<style>
#slides {
position: relative;
height: 300px;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.slide {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.showing {
opacity: 1;
z-index: 2;
}
.slide {
font-size: 40px;
padding: 40px;
box-sizing: border-box;
background: #333;
color: #fff;
}
.slide:nth-of-type(1) {
background: red;
}
.slide:nth-of-type(2) {
background: orange;
}
.slide:nth-of-type(3) {
background: green;
}
.slide:nth-of-type(4) {
background: blue;
}
.slide:nth-of-type(5) {
background: purple;
}
</style>
<ul id="slides">
<li class="slide showing">Slide 1</li>
<li class="slide">Slide 2</li>
<li class="slide">Slide 3</li>
<li class="slide">Slide 4</li>
<li class="slide">Slide 5</li>
</ul>
