Cześć,
zrobiłem slider w JS , ale co nie do końca działa tak jak chciałem.
Działa: samo zmienianie się obrazków, jak skończą się obrazki to powraca do pierwszego, kropki na dole działają.
Nie działa: strzałka lewo/prawo, usuwanie backgroundu nieaktualnej kropki, po wczytaniu się strony przez 3s pierwszy obrazek się nie wczytuje w ogóle, a potem jest już normalnie.
<div class="slider">
<img>
<div class="prev"><span class="fas fa-chevron-circle-left"></span></div>
<div class="next"><span class="fas fa-chevron-circle-right"></span></div>
<div class="dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
let i = 0;
const img = [ 'img/logo.png', 'img/slider1.jpg', 'img/slider2.jpg' ];
let dots = document.querySelectorAll(".dots span");
dots = [... dots];
const prev = document.querySelector(".prev");
const next = document.querySelector(".next");
const slide = document.querySelector(".slider img");
const changeImg = () =>
{
slide.src = img[i];
prev.addEventListener("click", () =>
{
i--;
if(i < 0) { i = 0; slide.src = img[0]; }
else {slide.src = img[i] };
});
next.addEventListener("click", () => i++ );
dots[0].addEventListener("click", () => slide.src = img[0] )
dots[1].addEventListener("click", () => slide.src = img[1] )
dots[2].addEventListener("click", () => slide.src = img[2] )
dots[i].style.background = "gray";
if( img.length - 1 > i ) i++;
else i = 0;
}
setInterval( () =>
{
changeImg();
}, 3000)
.slider
{
width: 100%;
height: 75%;
display: flex;
justify-content: center;
position: relative;
img:nth-child(1)
{
width: 100%;
height: 25vh;
}
.prev
{
width: 15%;
height: 30%;
position: absolute;
top: 40%;
left: 0;
opacity: 0.5;
.fa-chevron-circle-left
{
width: 95%;
height: 95%;
}
}
.next
{
width: 15%;
height: 30%;
position: absolute;
top: 40%;
right: 0;
opacity: 0.5;
.fa-chevron-circle-right
{
width: 95%;
height: 95%;
}
}
.fa-chevron-circle-left:hover , .fa-chevron-circle-right:hover
{
opacity: 1;
}
.dots
{
width: 100%;
height: 15%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 80%;
span
{
width: 25px;
height: 25px;
padding: 0 5px 0 5px;
border: 1px solid black;
border-radius: 50%;
}
}
Pozdrawiam