Jump to content
Fórum Script Brasil
  • 0

.remove() JQuery Ajuda como lógica


Question

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!

Link to post
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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!

 

Link to post
Share on other sites
  • 0

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');
	});
	
})

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      148886
    • Total Posts
      644943
×
×
  • Create New...