Hello, I'm trying to illustrate the dynamics of a slide show. And for that, I decided to try to develop one myself. Reading some explanations here from the forum could move forward. But I came across some difficulties.
My slide, when it arrives in the last iteration, reads one or two blank slides and then when it returns, instead of returning in the first as passed by jQuery, it goes to the second one.
However, if I click back, it will naturally come back on the first slide.
Here is the code for review:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>$(document).ready(function(e){//$("div.slider").height($("div.slider div.slide").height())
const blocos = $("div.slider div.slide");
function startslider() {
ativa = $("div.slider div.ativa")
if (!$(ativa).next().length) {
ativa = blocos[0]
}
$(ativa)
.removeClass("ativa")
.next()
.addClass("ativa")
setTimeout(startslider, 5000)
}
setTimeout(startslider, 5000)
$("nav button.anterior").click(function(){
prev = $("div.slider div.ativa").prev();
prev = prev.length ? prev : blocos[ blocos.length - 1 ];
mostraBloco(prev);
})
$("nav button.proximo").click(function(){
next = $("div.slider div.ativa").next();
next = next.length ? next : blocos[0];
mostraBloco(next);
})
/* Função para exibir as imagens */
function mostraBloco(next) {
ativa = $("div.slider div.ativa")
$(ativa).removeClass("ativa")
$(next).addClass("ativa")
}
});
</script>* {
margin: 0;
padding:0;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
div.slider {
overflow: hidden;
position:relative;
width: 100vw;
height:300px;
}
div.slider:hover {
animation-play-state:paused;
}
div.slider div.slide {
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:auto;
}
div.slider div.slide img {
width:100%;
}
div.slider div.ativa {
display: block;
}
div.slider div.ativa img{
animation: slider 1s linear;
animation-fill-mode: forwards;
}
div.slider div.ativa img:hover {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
@keyframes slider {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
div.slider div.slide span {
position:absolute;
width:100%;
line-height:40px;
bottom:0;
z-index:500;
color:rgb(255,255,255);
text-align:center;
}
div.slider nav {
position:absolute;
bottom:0;
width:100%;
height:40px;
background-color:rgb(0,0,0,.5);
z-index:400;
text-align:center;
}
div.slider nav button.anterior,
div.slider nav button.proximo {
position:absolute;
width:100px;
height:40px;
text-align:center;
}
div.slider nav button.anterior{
left:10%;
}
div.slider nav button.proximo{
right:10%;
}
div.slider nav button.proximo label {
top:calc(50%-20px);
}<div class="slider">
<div class="slide fade ativa">
<img src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_1.jpg"/><span>Esteé1</span></div><divclass="slide fade">
<img src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_2.jpg"/><span>Esteé2</span></div><nav><buttonclass="anterior">Anterior</button>
<button class="proximo">Próximo</button>
</nav>
</div>
</div>