Bug no slider
Olá, queria a ajuda de alguém para tentar resolver um bug no meu slider, acontece que aparentemente ele funciona normalmente, mas em algum momento quando volto para olhar-lo as vezes ele começa a trocar as imagens de forma muito rápida, tipo em um e um segundo, mas logo para e funciona normal. Não consegui descobrir o porque. Duvido que vocês vão ter tempo e paciência de ficar olhando para o slider para ver o erro, então queria que vocês apenas olhassem para os códigos do meus slider e me dissesse se tem algo que eu estou fazendo de errado ou que poderia fazer melhor, afim de não term mais chances do slider ter esse bug. Obrigado.
Código:
<html>
<head>
<title>Slider</title>
<style>
/* SLIDER */
* {
margin:0;
padding:0;
}
.slides {
width: 100%;
height: 100%;
z-index: 200;
position: relative;
border-bottom: ridge blue 5px;
}
#imagem1, #imagem2, #imagem3 {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
z-index: 200;
}
#imagem2, #imagem3 {
display: none;
}
#imagem1 {
display: block;
}
/*Botões*/
#B1, #B2, #B3 {
z-index: 300;
font-size: 50px;
}
#B1v, #B2v, #B3v {
z-index: 300;
font-size: 50px;
}
#pausar1, #pausar2, #pausar3 {
z-index: 300;
font-size: 50px;
}
#continuar1, #continuar2, #continuar3 {
z-index: 300;
font-size: 50px;
display: none;
}
.textoSlider {
position: relative;
top: -250px;
text-align: center;
color: white;
font-size: 30px;
width: 80%;
z-index: 300;
}
.saberMais {
font-size: 20px;
font-weight: bold;
background-color: #00BFFF;
width: 150px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 5px;
cursor: pointer;
text-align: center;
position: relative;
bottom: 230px;
z-index: 300;
}
.saberMais:hover {
transform: scale(.9);
transition: 1s;
border-radius: 10px;
background-color: #1E90FF;
}
.saberMais a:hover {
color: orange;
}
.saberMais a {
text-decoration: none;
color: blue;
}
#controle {
display: flex;
justify-content: space-between;
}
.controleEstilo {
width: 10%;
height: 10%;
margin: 10px;
text-align: center;
color: white;
position: relative;
bottom: 240px;
}
.controleEstilo:hover {
color: #104af6;
transition-duration: 1s;
}
.introducaoSlider {
display: flex;
justify-content: center;
}
.tituloSlider {
font-size: 30px;
color: red;
}
@media only screen and (max-width: 1100px) {
.textoSlider {
font-size: 20px;
width: 95%;
}
}
</style>
</head>
<body>
<!-- SLIDER -->
<header>
<ul>
<li>
<div id="imagem1">
<img src="https://joaobidu.com.br/wp-content/uploads/2017/05/foto-de-lua-crescente-550x367.jpg" class="slides">
<div class="introducaoSlider">
<div class="textoSlider">
<div class="tituloSlider">Titulo 1</div>
<label>Texto, texto texto texto texto texto texto texto texto texto texto texto</label>
</div>
</div>
<div class="introducaoSlider">
<div class="saberMais"><a href="#titulo1" class="scroll">Saber Mais</a></div>
</div>
<div id="controle">
<div class="controleEstilo" id="B1v">￩</div>
<div class="controleEstilo" id="pausar1">❙❙</div>
<div class="controleEstilo" id="continuar1">▷</div>
<div class="controleEstilo" id="B1">￫</div>
</div>
</div>
</li>
<li>
<div id="imagem2">
<img src="http://conexaoplaneta.com.br/wp-content/uploads/2016/05/cultivando-fases-da-lua-800.jpg" class="slides">
<div class="introducaoSlider">
<div class="textoSlider">
<div class="tituloSlider">Titulo 2</div>
<label>Texto, texto texto texto texto texto texto texto texto texto texto texto</label>
</div>
</div>
<div class="introducaoSlider">
<div class="saberMais" ><a href="#titulo2" class="scroll">Saber Mais</a></div>
</div>
<div id="controle">
<div class="controleEstilo" id="B2v">￩</div>
<div class="controleEstilo" id="pausar2">❙❙</div>
<div class="controleEstilo" id="continuar2">▷</div>
<div class="controleEstilo" id="B2">￫</div>
</div>
</div>
</li>
<li>
<div id="imagem3">
<img src="https://abrilclaudia.files.wordpress.com/2017/11/lua_cheia.jpg" class="slides">
<div class="introducaoSlider">
<div class="textoSlider">
<div class="tituloSlider">Titulo 3</div>
<label>Texto, texto texto texto texto texto texto texto texto texto texto texto</label>
</div>
</div>
<div class="introducaoSlider">
<div class="saberMais"><a href="#titulo3" class="scroll">Saber Mais</a></div>
</div>
<div id="controle">
<div class="controleEstilo" id="B3v">￩</div>
<div class="controleEstilo" id="pausar3">❙❙</div>
<div class="controleEstilo" id="continuar3">▷</div>
<div class="controleEstilo" id="B3">￫</div>
</div>
</div>
<li>
</ul>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
//SLIDER
var counter = 0
var timer = setInterval(function() {
counter++
console.log(counter)
//Troca slider sozinho
if (counter === 10) {
$("#imagem1").fadeOut("slow")
$("#imagem2").fadeIn("slow")
} else if (counter === 20) {
$("#imagem2").fadeOut("slow")
$("#imagem3").fadeIn("slow")
} else if (counter === 30) {
$("#imagem3").fadeOut("slow")
$("#imagem1").fadeIn("slow")
//reset
} else if (counter > 30) {
counter = 0
}
//Pausar/Continuar slider 1
$("#pausar1").click(function() {
counter = Number.NEGATIVE_INFINITY
})
$("#continuar1").click(function(){
counter = 0
})
//Pausar/Continuar slider 2
$("#pausar2").click(function() {
counter = Number.NEGATIVE_INFINITY
})
$("#continuar2").click(function(){
counter = 10
})
//Pausar/Continuar slider 3
$("#pausar3").click(function() {
counter = Number.NEGATIVE_INFINITY
})
$("#continuar3").click(function(){
counter = 20
})
}, 500);
//variaves usadas para pausar/continuar slider
let continuar1 = $("#continuar1")
let continuar2 = $("#continuar2")
let continuar3 = $("#continuar3")
let pausar1 = $("#pausar1")
let pausar2 = $("#pausar2")
let pausar3 = $("#pausar3")
//Se clicar em pausar1 slide, pausar1 some e aparece continuar1
pausar1.click(function(){
//pausar some
$("#pausar1").css('display', 'none')
//continuar aparece
$("#continuar1").css('display', 'block')
})
//Se cliclar em continuar1, continuar1 some e aparece pausar1
continuar1.click(function(){
//continuar some
$("#continuar1").css('display', 'none')
//pausar aparece
$("#pausar1").css('display', 'block')
})
//Se clicar em pausar2 slide, pausar2 some e aparece continuar2
pausar2.click(function(){
//pausar some
$("#pausar2").css('display', 'none')
//continuar aparece
$("#continuar2").css('display', 'block')
})
//Se cliclar em continuar2, continuar2 some e aparece pausar2
continuar2.click(function(){
//continuar some
$("#continuar2").css('display', 'none')
//pausar aparece
$("#pausar2").css('display', 'block')
})
//Se clicar em pausar3 slide, pausar3 some e aparece continuar3
pausar3.click(function(){
//pausar some
$("#pausar3").css('display', 'none')
//continuar aparece
$("#continuar3").css('display', 'block')
})
//Se cliclar em continuar3, continuar3 some e aparece pausar3
continuar3.click(function(){
//continuar some
$("#continuar3").css('display', 'none')
//pausar aparece
$("#pausar3").css('display', 'block')
})
//Avançar
$("#B1").click(function() {
counter = counter = 10
$("#imagem1").fadeOut("slow")
$("#imagem2").fadeIn("slow")
})
$("#B2").click(function() {
counter = counter = 20
$("#imagem2").fadeOut("slow")
$("#imagem3").fadeIn("slow")
})
$("#B3").click(function() {
counter = counter = 30
$("#imagem3").fadeOut("slow")
$("#imagem1").fadeIn("slow")
})
//Voltar
$("#B1v").click(function() {
counter = counter = 20
$("#imagem1").fadeOut("slow")
$("#imagem3").fadeIn("slow")
})
$("#B3v").click(function() {
counter = counter = 10
$("#imagem3").fadeOut("slow")
$("#imagem2").fadeIn("slow")
})
$("#B2v").click(function() {
counter = counter = 0
$("#imagem2").fadeOut("slow")
$("#imagem1").fadeIn("slow")
})
//Para arruamar bug no firefox que não aceita height:100% no modo celular
var firefox = navigator.userAgent.indexOf('Firefox') > -1;
if (window = firefox){
alert("Firefox")
if (window.innerWidth < 1000) {
$(".slides").css('max-height', '580px')
$("header").css('max-height', '580px')
alert("1000")
}
}
</script>
</body>
</html>Discussão (0)
Carregando comentários...