Problemas em criação de slide personalizado
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");
});
})Discussão (0)
Carregando comentários...