Jump to content
Carcleo

Problemas em criação de slide personalizado

Recommended Posts

Estou fazendo um slide,

 

Nele, tenho 2 problemas que não encontro solução e peço a ajuda de vocês!

 

Problemas que existem agora:

 

A) Quando o slide começa, no arranque, está sem o efeito. Mas só o arranque mesmo, depois tudo sai corretamente e o feito funciona tanto na ida quanto na volta.

B) Perceba que eu crio uma UL clone, e, em algumas rodadas a primeira LI dela está sobrepondo um pouco sobre a ultima LI da UL anterior em uma volta. Já em outra volta vai normal e numa outra volta acaba dando um espaço maior entre as LIs. Acho que erro de arredondamento ou de conta!

 

Pode notar no inicio do JS o trecho

 

$(".itens").css('transition','all 1s ease');

 

Que tecnicamente deveria adicionar o efeito antes mesmo do loop começar.

 

Sendo assim, não consigo ver motivo do arranque não ter o efeito

 

Coloquei no codepen.io para vocês verem os problemas acontecendo!:

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

 

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;
   align-items: center;
   width: 100%;
   height: 130px;
   border: 0;   
}
.slider > #holder {
   position: relative;
   display: flex;
   overflow: hidden;
}
.slider > #holder > #uls {
   position: relative;
   display: flex;
}

.slider > #holder > #uls > ul {
   position: relative;
   display: flex;
}

.slider > #holder > #uls > ul > li {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 200px;
   height: 100px;
}
.slider > #holder > #uls > ul > li > a {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
}
.slider > #holder > #uls > 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="holder">
	
		<div id="uls">

			<ul class="itens">

				<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 id="controles">

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

</div>

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

JAVASCRIPT

$(document).ready( function() {
		
	//cria as variáveis NÃO modificáveis;
	var container          =   $("div.slider"),
		holder             =   $(container).find("div#holder"),
		uls                =   $(holder).find("div#uls"),
		ul                 =   $(uls).find("ul"),
		lis                =   $(ul).find("li"),
		tamanhoLi          =   Math.round ( $(lis).first().width() ),
		numeroLis          =   Math.round ( $(lis).length ),
		tamanhoUl          =   Math.round ( tamanhoLi * numeroLis ),
		controles          =   $(container).find("div#controles"),
		span               =   $(container).find("span#title"),
		btnVoltar          =   $(controles).find("button#back"),
		btnAvancar         =   $(controles).find("button#next");

	//cria as variáveis modificáveis;
	var numeroSlidesMostra =   4,
		tempoIntervalo     =   2000;
		
	//determina a largura da div que abrigará as UL's.	
	$(holder).width(numeroSlidesMostra * tamanhoLi);
	//determina a largura das ULs partindo do produto entre a largura de cada LI e a quantidade de LI's
	$(ul).width(tamanhoUl);
	//acresenta efeito de transição na UL
	$(".itens").css('transition','all 1s ease');
	
	//fazendo um clone no final da da div de ULs
	$(ul).clone().appendTo(uls);
	
	
	//função avançar
	function avancar () {
		
		$(".itens").each (function() {
			
			console.log ( Math.round ( $(this).position().left ) );
			
			if ( Math.round ( $(this).position().left ) <= -Math.round ( $(ul).width() ) ) 
				$(this).css({
					"transition" : "none",
					"left"       : "+=" + ( ( 2 * tamanhoUl ) - tamanhoLi )
				}) ;
			else 			
				$(this).css({
					"transition" : "all 1s ease",
					"left"       : "-=" + tamanhoLi
				}) ;
			
		});
		
	}

	//função voltar
	function voltar () {
		
		$(".itens").each (function() {			
			
			console.log ( Math.round ( $(this).position().left ) );
			
			if ( Math.round ( $(this).position().left ) >= Math.round ( $(holder).width() ) ) 
				$(this).css({
					"transition" : "none",
					"left"       : "-=" + ( ( 2 * tamanhoUl ) - tamanhoLi )
				}) ;
			else 			
				$(this).css({
					"transition" : "all 1s ease",
					"left"       : "+=" + tamanhoLi
				}) ;
				
		});
		
	}
	
	//código do onClick no botão avancar
	btnAvancar.click ( function (e) {
	  clearInterval(loop);
	  avancar();
	  loop = setInterval( avancar, tempoIntervalo);
	});

	//código do onClick no botão voltar
	btnVoltar.click ( function (e) {
	  clearInterval(loop);
	  voltar();
	  loop = setInterval( avancar, tempoIntervalo);
	});	
	
	//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
	holder.mouseover(function(){
		clearInterval(loop);
		//mostra a mensagem 
		span.css("display", "flex");
	}).mouseout(function(){
		loop = setInterval( avancar, tempoIntervalo );	
		//esconde a mensagem 
		span.css("display", "none");
	});
	
})

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By srs1999_
      Tópico
       
      Site em Código
      Sobre desenvolver sites sem o wordpress que ja tá tudo ali feito que seja um site dinâmico ou seja com banco de dados , APIs de pagamento, Painel para o usuário ,  além de todas  as funções que tem no wordpress e você teria propriedade pra explicar sobre detalhes mais técnicos da produção onde no wordpress só quem entende de progrqmação explicaria algum detalhe técnico 
      Então usando basicamente : 
      FRONT END 
      HTML 
       CSS 
      JAVASCRIPT 
      ALGUMA DE BACKEND COMO PHP E BANCO DE DADOS
      Pode se criar sites/sistemas tão bons ou melhores que no wordpress
       
      Fato : o proprio wordpress é feito em php e ate o proprio facebook tbm em php
      Fato 2 :  cerca de 70% dos sites são feitos em Wordpress
       
      Acho esse lance de procurar o caminho mais fácil limita muito a pessoa por exemplo é facil editar imagens no paint bem intuitivo , agora para editar no photoshop com muitas outras possibilidades  acaba sendo importante ir explorando essa elaboração mais difícil  com um mesmo objetivo. No caso do exemplo ( editar imagens )  
       
      Reflexão:
      Vale a pena se dedicar a trabalhar com a ferramenta Wordpress apenas por ser um meio rápido de ganhar dinheiro ?
      Ou trabalhar sem wordpress  usando tudo que exigido pra criar coisas originais mais que não seria tão rápido a produção. Mas creio que além dos sites feitos também geraria a possibildade de vender o sistema web criado para o cliente personalizar .
       
      Você Desenvolveria de que forma :
       Wordpress apenas ?
       
      Conhecer programação pra trabalhar 
      com  Wordpress ?
       
      Produzir tudo só com programação totalmente dinâmico sem  Wordpress?
    • By Joob
      Boas Malta,
       
      Queria ver se me conseguiam ajudar.
      Tenho um Search Bar em Vue,  quando faço uma pesquisa dos ficheiros ou pastas, dá-me sempre como se nada fosse encontrado, ou seja não dá o resultado, imaginemos por exemplo a pasta tem um nome de "Pasta Numero" eu começava a pesquisar com "P" ou com o "N" e supostamente deveria pesquisar tudo o que tem "P" e "N" (pastas e ficheiros).
       
      Resolvido
       
      Obrigado :)
    • By zuuzu
      Olá, estou desenvolvendo uma api para download de fotos/videos/gif, eu consegui fazer tudo certinho, mas na hora de gerar um link de download aleatório ele gera sempre o mesmo, só gera um link diferente se eu reiniciar o servidor, queria que gerasse um link diferente sempre que eu reiniciasse a página, sem precisar reiniciar o servidor. Tem como alguém me ajudar com isso? *A api está sendo desenvolvida para a automatização de download de fotos/videos/gif*

    • By Felper
      Estou tentando alterar a cor de fundo de uma célula, porém está dando o seguinte erro: Uncaught TypeError: Cannot read property 'style' of null .
      Segue abaixo o meu código:
       
      function criarTabela(){ // vamos criar o elemento HTML table var tabela = document.createElement("table"); tabela.border = "1px"; tabela.cellSpacing = "0px"; tabela.cellPadding = "3px"; // vamos criar o corpo da tabela, ou seja, o tbody var corpo = document.createElement("tbody"); tabela.appendChild(corpo); // vamos criar três linhas contendo quatro células cada uma for(var i = 0; i < 151; i++){ var linha = corpo.insertRow(-1); for(var j = 0; j < 5; j++){ var celula = linha.insertCell(-1); celula.setAttribute("id", "lin"+i+"col"+j); } } // vamos anexar a tabela recém-criada a um elemento div var container = document.getElementById("container"); container.appendChild(tabela); } cria.addEventListener('click', criarTabela); let lin1col0 = document.getElementById('lin1col0'); let lin2col0 = document.getElementById('lin2col0'); let lin3col0 = document.getElementById('lin3col0'); let lin4col0 = document.getElementById('lin4col0'); let lin5col0 = document.getElementById('lin5col0'); let num = 1; switch(num){ case 1: lin1col0.style.backgroundColor = "red"; break; case 2: lin2col0.style.backgroundColor ="red"; break; case 3: lin3col0.style.backgroundColor = "red"; break; case 4: lin4col0.style.backgroundColor = "red"; break; case 5: lin5col0.style.backgroundColor = "red"; break; default: alert("Erro!"); }  
    • By terra
      Olá,
       
      preciso chamar em blade laravel
       
       
      estou tentando assim mas não funciona
       
      <script>document.write(cidade)</script>
       
      <?php
         $variavelphp = "<script>document.write(cidade)</script>";
         echo $variavelphp;
      ?>
      agradeço qualquer ajuda
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.