Estou tentando criar um slideshow mas personalizado sem depender de biblioteca de terceiros (salvo, jQuery);
O objetivo é:
O slide rodar interminavelmente.
Ao passar o mouse no slide, ele deve parar;
Ao deixar o slide, ele deve continuar rodando de onde parou!
O problema é:
Ao passar o mouse novamente o interval deve parar. Mas não está parando.
function intervalo () {
$(".slider > #next").click ();
}
var interval = setInterval(intervalo,4000);
$(".slider > ul > li").mouseover(function(){
clearInterval(interval);
}).mouseout(function(){
interval = setInterval(intervalo,4000);
});
$(".slider > #back").click ( function(){
var liMover = $('.slider ul li:last-of-type'); // copia o conteudo da última
$('slider ul li:last-of-type').remove(); // remove a última
$(liMover).insertBefore('.slider ul li:first-of-type'); // insere antes da primeira
});
$(".slider > #next").click ( function(){
var liMover = $('.slider ul li:first-of-type'); // copia o conteudo da primeira
$('.slider ul li:first-of-type').remove(); // remove a primeira
$(liMover).insertAfter('.slider ul li:last-of-type'); // insere depois da última
});
* {
margin: 0;
padding: 0;
}
body {
display: flex;
width: 1000px;
margin: 0 auto;
}
.slider {
position: relative;
display: flex;
flex-direction: column;
width: 1000px;
height: 150px;
overflow: hidden;
border: 1px solid #000;
}
.slider > ul {
display: flex;
flex-wrap: wrap;
width: 5000px;
}
.slider > ul > li {
display: flex;
width: 500px;
height: 150px;
}
.slider > button {
position: absolute;
display: flex;
justify-content: center;
top: calc(45% - 15px);
width: 30px;
height: 30px;
opacity: .2
}
.slider > button:hover {
opacity: 1;
cursor: pointer;
}
.slider > button#back {
left: 10px;
}
.slider > button#next {
right: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
<ul>
<li> Slide 1 </li>
<li> Slide 2 </li>
<li> Slide 3 </li>
<li> Slide 4 </li>
</ul>
<button id="back"> BACK </button>
<button id="next"> NEXT </button>
</div>
O que estará errado!