.remove() JQuery Ajuda como lógica

Carlos Rocha · Março 2, 2020

Então, estou tentando criar um Slide Show personalizado!

Mas a ideia é realmente entender o que estou fazendo. Por isso não estou usando soluções prontas tipo bottstrap entre outras!

Tecnicamente, eu consegui.

Estou fazendo assim:

Tenho uma DIV que abriga 1 UL inicialmente.

Logo após, eu crio um clone dessa UL e coloco no fim dessa DIV.

Depois, eu quero remover a primeira UL

Mas quando removo começa a bagunçar e some tudo!

Gostaria de uma ajuda para criar a logica da remoção de uma UL que não mais será usada!

Segue o código:

CSS

* {
	border:0;
	padding: 0;
	margin: 0;
	outline: 0;	
	box-sizing: border-box;
}
body {
	display:flex;
	width: 1040px;	
	margin: 0 auto;
	justify-content: center;
}
.slider > * {	
	border:0;
	padding: 0;
	margin: 0;
	outline: 0;	
	box-sizing: border-box;
}
.slider {
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 130px;
   border: 0;   
}
.slider > #slides {
   position: relative;
   display: flex;
   overflow: hidden;
}
.slider > #slides > #slidesHolder {
   position: relative;
   display: flex;
   transition: all 1s ease;
}
.slider > #slides > #slidesHolder > ul {
   position: relative;
   display: flex;
   list-style: none;
}
.slider > #slides > #slidesHolder > ul > li {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 200px;
   height: 100px;
}
.slider > #slides > #slidesHolder > ul > li > a {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
}
.slider > #slides > #slidesHolder > ul > li > a > img {
	height: 100%;
}
.slider > #title {
	position: absolute;
    align-items: center;
    justify-content: center;
	display: none;
	width: 100px;
	height: 30px;
	top: 50px;
	right: calc(50% - 25px);
	background: #999;
	border: 1px solid #ccc;
}
.slider > .controles {
   display: flex;
   align-items: center;
   justify-content: center;	
   width: 100%;
   height: 30px;
}

.slider > .controles  > button {
   display: flex;
   align-items: center;
   justify-content: center;		
   width: 30px;
   height: 30px;
   cursor: pointer;
   margin: auto 5px;
   border-radius: 50%;
   opacity: .2;
}

.slider > .controles  > button:hover {
   opacity: 1;
   border: 1x solid #ccc;
}

HTML

<link type="text/css" rel="stylesheet" href="scripts/css/estilo.css"/>
<link type="text/css" rel="stylesheet" href="scripts/css/slider.css"/>

<div class="slider">

	<div id="slides">

		<div id="slidesHolder">

			<ul>

				<li><a href=''><img src='img/sites/ctemcasb.png'></a></li>

				<li><a href=''><img src='img/sites/fielcard.png'></a></li>

				<li><a href=''><img src='img/sites/funerariasaopedro.png'></a></li>

				<li><a href=''><img src='img/sites/gasmuriae.png'></a></li>

				<li><a href=''><img src='img/sites/hotplateprensas.png'></a></li>

				<li><a href=''><img src='img/sites/mariasvaidosas.png'></a></li>

			</ul>
			
		</div>
	
	</div>
	
	<span id="title">Pausado</span>
	
	<div class="controles">

		<button id="back"> < </button>
		<button id="next"> > </button>
		
	</div>

</div>

<script type="text/javascript" src="scripts/js/jquery.js"></script>
<script type="text/javascript" src="scripts/js/slider.js"></script>

JAVASCRIPT

$(document).ready( function() {

	//cria as variáveis modificáveis;
	var numeroSlidesMostra =   4,
		tempoIntervalo     =   2000,
		caminho            =   0;
		
	//cria as variáveis NÃO modificáveis;
	var container          =   $("div.slider"),
		slides             =   $(container).find("#slides"),
		slidesHolder       =   $(slides).find("#slidesHolder"),
		slide              =   $(slidesHolder).find("ul"),
		lis                =   $(slide).find("li"),
		tamanhoLi          =   $(lis).first().outerWidth(),
		numeroSlides       =   $(lis).length,
		tamanhoUl          =   tamanhoLi * numeroSlides,
		slideClone         =   $(slide).clone(),
		controles          =   $(container).find("div.controles"),
		span               =   $(container).find("span#title"),
		btnVoltar          =   controles.find("button#back"),
		btnAvancar         =   controles.find("button#next");

	//determina a largura da div que abrigará as UL's.
	$(slides).width(numeroSlidesMostra * tamanhoLi);
	//determina a largura de cada UL partindo do produto entre a largura de cada LI e a quantidade de LI's
	$(slide).width(tamanhoUl);
	//determina a largura de cada UL clone partindo do produto entre a largura de cada LI e a quantidade de LI's
	$(slideClone).width(tamanhoUl);

	function avancar () {	
		
		//calcula o envio do slider para frente na largura de uma LI
		caminho -= tamanhoLi;		
		
		//envia o slider para frente
		$(slidesHolder).css("transform" , "translateX(" + caminho + "px)");
		
		//encontra a posição do slider no momento da função
		let posicao = $(slidesHolder).position().left;
		
		//verifica se o slide já caminhou uma UL inteira
		if ( posicao % tamanhoUl === 0) {
			
			//cria uma UL no final do slider
			$(slideClone).clone().appendTo($(slidesHolder));
			//exclui a primeira UL que não precisamos mais
			//código comentado pois está removendo tudo
			//$(slidesHolder).find("ul").first().remove();
			
		} 
		
	}


	function voltar () {	
		
		//calcula o envio do slider para traz na largura de uma LI
		caminho += tamanhoLi;		
		
		//envia o slider para traz
		$(slidesHolder).css("transform" , "translateX(" + caminho + "px)");	
		
		//encontra a posição do slider no momento da função
		let posicao = $(slidesHolder).position().left;
		
		//verifica se o slide já caminhou uma UL inteira		
		if ( posicao % tamanhoUl === 0) {
			
			//cria uma UL no inicio do slider
			$(slideClone).clone().prependTo($(slidesHolder));
			//exclui a ultima UL que não precisamos mais
			//código comentado pois está removendo tudo
			//$(slidesHolder).find("ul").last().remove();
			
		} 			
		
		
	}

	//código do onClick no botão avancar
	btnAvancar.click ( function () {

		avancar();		
		
	});
	
	//código do onClick no botão voltar
	btnVoltar.click ( function () {

		voltar();		
		
	});

	//dispara o loop na função avançar
	var loop = setInterval( avancar, tempoIntervalo);		

	//para e reinicia o loop ao passar/retirar o mouse sobre o slide
	slides.mouseover(function(){
		clearInterval(loop);
		//mostra a mensagem 
		span.css('display', 'flex');
	}).mouseout(function(){
		loop = setInterval(avancar,tempoIntervalo);
		//esconde a mensagem 
		span.css('display', 'none');
	});
	
})

Obrigado a quem puder me ajudar!

Leonardo Persan · Março 2, 2020

Só consegui achar erro quando clico para avançar:
https://jsfiddle.net/ajq2gw4o/4/

Para corrigir isso eu trocaria de:

6 horas atrás, Carlos Rocha disse:

slides.mouseover(function(){

Para:

container.mouseover(function(){

Seu código ficou muito bom, muito organizado, parabéns

Carlos Rocha · Março 3, 2020

Oi, obrigado pelo retorno. Mas, o problema continua!

Note que, no código que você postou no fiddle você não descomentou a linha

//$(slidesHolder).find("ul").first().remove();

Sendo assim, o código ainda cotinina gerando clones indefinidamente sem remover as que já passaram pelo container!

Entendeu o drama?

Quando você descomentar a linha que remove a UL, perceberá que os problemas começam!

E só mais uma coisa: Se você fizer,

container.mouseover(function(){

Terá problemas para com os botoes pois o slider pausará.

Mas perceba que, mesmo que tudo pareça estar indo bem, você verá que após algumas passagens, o slider se findará e n]ao mostrará mais nada pois a UL já estará distante para a esquerda ou para a direita conforme o sentido!

E um ultimo problema, quando clica nos botões, apos o segundo ou terceiro cliques, perceberá que o slide se finda!

Leonardo Persan · Março 3, 2020

p**** foi bem mais chato do que eu tinha imaginado, tive que reescrever boa parte das duas funções e trabalhar com async awayt pro efeito ficar fluido kkkkk

https://jsfiddle.net/leopersan/ab1tvehu/6/

Carlos Rocha · Março 4, 2020

Opa, obrigado.

Mas veja isso!

https://codepen.io/carcleo/pen/RwPGeMN

O problema do efeito eu arrumei. Após ver a sua solução enxerguei detalhe que não estava conseguindo perceber;

Mas, se puder perder mais uns minutinhos comigo...

Existem 2 problemas finais agora que não consigo resolver!

Quando ele chega no ponto de volta, embora ele volte corretamente agora, ele esta dando o prazo do timer que é 2 segundos e não deveria dar. Mas isso deve ser que preciso parar o timer nesse ponto.

O outro problema esta nos botões!

Quando clico, ele vai empurrando a UL (normal), mas acaba a UL e fica espaço em branco.

Não acontece a mesma coisa que no automático!||

Entendendo esses 2 problema para mim acaba esse projeto!

Segue novo código:

CSS


* {
	margin: 0;
	padding: 0;
	border: none;
}

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

..no-transition {
	transition: none !important;
}
.slider > * {	
	border:0;
	padding: 0;
	margin: 0;
	outline: 0;	
	box-sizing: border-box;
}
.slider {
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 130px;
   border: 0;   
}
.slider > #slides {
   position: relative;
   display: flex;
   overflow: hidden;
}
.slider > #slides > #slidesHolder {
   position: relative;
   display: flex;
   transition: all 1s ease;
}
.slider > #slides > #slidesHolder > ul {
   position: relative;
   display: flex;
   list-style: none;
}
.slider > #slides > #slidesHolder > ul > li {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 200px;
   height: 100px;
}
.slider > #slides > #slidesHolder > ul > li > a {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
}
.slider > #slides > #slidesHolder > ul > li > a > img {
	height: 100%;
}
.slider > #title {
	position: absolute;
    align-items: center;
    justify-content: center;
	display: none;
	width: 100px;
	height: 30px;
	top: 50px;
	right: calc(50% - 25px);
	background: #999;
	border: 1px solid #ccc;
}
.slider > #controles {
   display: flex;
   align-items: center;
   justify-content: center;	
   width: 100%;
   height: 30px;
}

.slider > #controles  > button {
   display: flex;
   align-items: center;
   justify-content: center;		
   width: 30px;
   height: 30px;
   cursor: pointer;
   margin: auto 5px;
   border-radius: 50%;
   opacity: .2;
}

.slider > #controles  > button:hover {
   opacity: 1;
   border: 1x solid #ccc;
}

HTML

<div class="slider">

	<div id="slides">

		<div id="slidesHolder">

			<ul>

				<li><a href=''>1</a></li>

				<li><a href=''>2</a></li>

				<li><a href=''>3</a></li>

				<li><a href=''>4</a></li>

				<li><a href=''>5</a></li>

				<li><a href=''>6</a></li>

				<li><a href=''>7</a></li>
			</ul>
			
		</div>
	
	</div>
	
	<span id="title">Pausado</span>
	
	<div id="controles">

		<button id="back"> < </button>
		<button id="next"> > </button>
		
	</div>

</div>

Javascript

$(document).ready( function() {

	//cria as variáveis modificáveis;
	var numeroSlidesMostra =   4,
  		tempoIntervalo     =   2000,
	  	caminho            =   0;
		
	//cria as variáveis NÃO modificáveis;
	var container          =   $("div.slider"),
		slides             =   $(container).find("#slides"),
		slidesHolder       =   $(slides).find("#slidesHolder"),
		slide              =   $(slidesHolder).find("ul"),
		lis                =   $(slide).find("li"),
		tamanhoLi          =   $(lis).first().outerWidth(),
		numeroSlides       =   $(lis).length,
		tamanhoUl          =   tamanhoLi * numeroSlides,
		slideClone         =   $(slide).clone(),
		controles          =   $(container).find("div#controles"),
		span               =   $(container).find("span#title"),
		btnVoltar          =   controles.find("button#back"),
		btnAvancar         =   controles.find("button#next");

	//determina a largura da div que abrigará as UL's.
	$(slides).width(numeroSlidesMostra * tamanhoLi);
	//determina a largura de cada UL partindo do produto entre a largura de cada LI e a quantidade de LI's
	$(slide).width(tamanhoUl);
	//determina a largura de cada UL clone partindo do produto entre a largura de cada LI e a quantidade de LI's
	$(slideClone).width(tamanhoUl);
	//cria uma cópia antes
	$(slideClone).clone().prependTo($(slidesHolder));
	//cria uma cópia depois
	$(slideClone).clone().appendTo($(slidesHolder));
	
	function avancar () {	
		
		if (  $(slidesHolder).position().left <= -tamanhoUl )
			$(slidesHolder).css ({"transition": "none", "left": 0});
		else
			$(slidesHolder).animate({
				"left" : "-=" + tamanhoLi
			}, 1000);			
		
	}


	function voltar () {
		
		if (  $(slidesHolder).position().left >= tamanhoUl )
			$(slidesHolder).css ({"transition": "none", "left": "-=" + tamanhoUl});
		else
			$(slidesHolder).animate({
				"left" : "+=" + tamanhoLi
			}, 1000);			
		
	}
	
	btnAvancar.click ( function () {

		avancar();		
		
	});
	
	//código do onClick no botão voltar
	btnVoltar.click ( function () {

		voltar();		
		
	});

	//dispara o loop na função avançar
	var loop = setInterval( avancar, tempoIntervalo);		

	//para e reinicia o loop ao passar/retirar o mouse sobre o slide
	slides.mouseover(function(){
		clearInterval(loop);
		//mostra a mensagem 
		span.css('display', 'flex');
	}).mouseout(function(){
		loop = setInterval( avancar, tempoIntervalo);	
		//esconde a mensagem 
		span.css('display', 'none');
	});
	
})

Entrar

.remove() JQuery Ajuda como lógica

Pergunta

Carlos Rocha

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

Leonardo Persan

Link para o comentário

Compartilhar em outros sites

Carlos Rocha

Link para o comentário

Compartilhar em outros sites

Leonardo Persan

Link para o comentário

Compartilhar em outros sites

Carlos Rocha

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades