I have the following slide below:
$(document).ready(function(e) {
const blocos = $("div.slider div.slide div");
function startslider() {
ativa = $(".ativa")
if (!$(ativa).next("div.slide").length) {
// remove a classe do último
$(ativa)
.removeClass("ativa")
// adiciona a classe no primeiro
$("div.slider div.slide")
.first()
.addClass("ativa")
}else{
$(ativa)
.removeClass("ativa")
.next()
.addClass("ativa")
}
setTimeout(startslider, 5000)
}
setTimeout(startslider, 5000)
$("div.slider nav button.anterior").click(function(){
prev = $(".ativa").prev();
prev = prev.length ? prev : blocos[ blocos.length - 1 ];
mostraBloco(prev);
})
$("div.slider nav button.proximo").click(function(){
next = $(".ativa").next();
next = next.length ? next : blocos.first();
mostraBloco(next);
})
/* Função para exibir as imagens */
function mostraBloco(next) {
ativa = $(".ativa")
$(ativa).removeClass("ativa")
$(next).addClass("ativa")
}
})
* {
margin: 0;
padding: 0;
border: none;
outline: 0;
}
body {
width: 100vw;
}
ul {
list-style: none;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes slider {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
div.slider {
position: relative;
width: 100%;
overflow: hidden;
}
div.slider div.slide {
}
div.slider div.slide {
display: none;
}
.ativa {
display: block !important;
animation: fade 1s linear;
}
div.slider div.slide img {
position: relative;
width: 100%;
animation: slider 1s linear;
animation-fill-mode: forwards;
}
div.slider div.slide span {
position: absolute;
width: 100px;
left: calc(50% - 50px);
line-height: 40px;
bottom: 0;
text-align: center;
color: rgb(255,255,255);
z-index: 2;
}
div.slider nav {
position: absolute;
width: 100%;
height: 40px;
bottom: 0;
background-color: rgba(0,0,0,.5);
z-index: 1;
}
div.slider nav button {
position: absolute;
width: 150px;
height: 100%;
cursor: pointer;
}
div.slider nav button.anterior {
left: 10%;
}
div.slider nav button.proximo {
right: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="slider">
<div class="slide ativa">
<img src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_1.jpg"/><span>Esteé1</span></div><divclass="slide">
<img src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_2.jpg"/><span>Esteé2</span></div><divclass="slide">
<img src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_3.jpg"/><span>Esteé3</span></div><nav><buttonclass="anterior">Anterior</button>
<button class="proximo">Próximo</button>
</nav>
</div>
I have a problem here regarding the buttons:
Buttons when they arrive in the first and last sliders show blank. But the automatic keeps running, that is, the startslider () function works fine.
How to fix this?
I've exhausted my possibilities and need help!