-3

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!

3
  • Só um detalhe: A solução apresentada em pt.stackoverflow.com/questions/115615/…, tem exatamente a mesma falha! Embora ambas soluções funcionem bem no inicio! 20/02/2020 às 16:32
  • Então testei no chrome, com windows 10, notebook hp pavilion tsc15 e funcionou. Diminui o intervalo para um segundo. Me expliquem melhor a condição de falha desse código. 20/02/2020 às 16:52
  • 1
    Então @AugustoVasques, só para te dar uma satisfação. No meu código, tinha era código de mais. kkk. Era só retirar $('.slider ul li:first-of-type').remove(); conforme a resposta do colega abaixo, que funcionou de boa!. Obrigado pela atenção! 20/02/2020 às 18:45

1 Resposta 1

3

O que acontece é que quando você usa o remove() no li ele já não é mais o mesmo elemento e perde a aplicação dos eventos mouseover e mouseout. Inclusive não é só depois da primeira vez de um mouse over que pàra de funcionar, após um ciclo completo do slide rodando também não funciona pois todos os li foram substituídos. O remove não é necessário, ao usar o insertAfter a posição do li é mudada e portanto ele não estará mais no início da lista.

Código funcionando (mudei algumas coisas de estilo e velocidade só pra ficar mais fácil de ver):

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script>

$().ready(() => {

$(".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
});

function intervalo () {
$(".slider > #next").click ();
}

interval = setInterval(intervalo,1000);

$(".slider > ul > li").mouseover(function(){
    clearInterval(interval);
}).mouseout(function(){
    interval = setInterval(intervalo,1000);
});

}); 

</script>

<style>
* {
    margin: 0;
    padding: 0;
}

body {
        display: flex;
        width: 1000px;
        margin: 0 auto;
}

.slider {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 1000px;
    height: 200px;
    overflow: hidden;   
    border: 1px solid #000;
}

.slider > ul {
    display: flex;
    flex-wrap: wrap;
    width: 5000px;  
}

.slider > ul > li {
    display: flex;
    width: 500px;
    height: 150px;
    margin: 10px;
}

.slider > ul > li:hover {
    cursor: crosshair;
}

.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;
}
</style>

<body>

<div class="slider">

    <ul>
      <li style="background: #cce5ff;"> Slide  1 </li>
      <li style="background: #ffe5e5;"> Slide  2 </li>
      <li style="background: #3399ff;"> Slide  3 </li>
      <li style="background: #ff9999;"> Slide  4 </li>
    </ul>       

    <button id="back"> BACK </button>
    <button id="next"> NEXT </button>

</div>
</body>

</html>

Veja funcionando aqui.

4
  • Rapaz, deu certo! Era isso mesmo! Agora, você pode, claro, se eu não estiver pedindo demais, adicionar, ou me indicar como fazer com que essa transição não acontece abruptamente? Tipo, um efeito de transição! Mas a resposta que eu precisava você já deu. Inclusive , testei no meu código, e foi só remover a linha do .remove que funcionou! 20/02/2020 às 17:19
  • Assim de pronto não sei, mas esse código aqui faz algo parecido usando classes: jsfiddle.net/239pcojn/2
    – mari
    20/02/2020 às 17:54
  • Esqueci de comentar que é bom colocar seu código dentro do jQuery ready() para garantir que só tentará associar os eventos (em particular o onclick() dos botões) após o DOM estar carregado.
    – mari
    20/02/2020 às 17:56
  • ah sim, por isso coloquei o js depois do html! 20/02/2020 às 18:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .