Slider nie działa

Question

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

Answer 1

next.addEventListener("click", () =>  i++ );

w tej linijce po zdarzeniu click z next ty w calback zwracasz wartość i, a nie modyfikujesz wartość zmiennej "i". Jest ona powyżej zadeklarowana jako typ prosty:

let i = 0; // czyli i: number

więc przekazujesz ją przez wartość, a nie przez referencję. Pewnie chodziło Ci o to, aby modyfikować jej wartość, więc zrób:

next.addEventListener("click", () => {  i++ } );

albo w pełni jawnie:

next.addEventListener("click", () => {
    i++;
    return undefined;
});

 

Comments

A próbowałeś w ogóle debugować swój kod...? Chyba nie :)

Zobaczmy co masz w kodzie:

const prev = document.querySelector(".prev");

a teraz piszesz, że potem gdzieś dodajesz img[0] + prev. Pytanie więc co Ci siedzi w tych zmiennych, bo z kodu ja że w prev siedzi obiekt (referencja DOM), a w zmiennej img[0] siedzi ciąg znakowy stanowiący ścieżkę do pliku.

Nie wiem więc w końcu jaki jest Twój ostateczny kod, bo z tego który ostatni dałeś to jak piszę, w prev jest obiekt a nie żaden ciąg znakowy więc ich konkatenacja nie ma żadnego sensu...

Najlepiej takie przykłady dawaj jako codepen tylko pamiętaj, że jeśli pobierasz jakieś zdjęcia lokalnie u siebie to na codepen daj jakieś ścieżki z http... albo wprowadź testowo grafiki jako base64 itp. Tak, żeby można było je zobaczyć :)

---

Tak chyba będzie najszybciej:

https://codepen.io/anon/pen/djoMPM

---

Straszny bałagan jest w tym kodzie i szczerze to nie chce mi się go całego analizować. Tu masz przykład na szybko prostego slidera prev-next:

https://codepen.io/anon/pen/gjpgGE?editors=1010

Kod daleki od ideału, nawet bardzo daleki, ale chodziło mi o pokazanie jakiegoś jednego z przykładów na analizę tego indeksu obrazka.

Spróbuj pokombinować.

---

Okej, coś porobię żeby działało. Dzięki za pomoc.

---

@Tomek Sochacki,

śmieszna historia, bo zacząłem szukać różnych poradników na Youtubie, co by mi odpowiadało, zazwyczaj albo były kropki, albo strzałki, albo dość stara składnia, więc po dwóch godzinach irytacji (bo zaczynałem coś z jednego poradnika, później, że jednak tych strzałek nie zgram z tym drugim poradnikiem z kropkami, zacząłem myśleć co faktycznie jest nie tak z moim sliderem, odpowiedź okazała się bardzo prosta: licznik był nie w tej linijce co trzeba było, dlatego za każdym razem dodawało mi po 2 zamiast po 1. Wrzucę Ci kod, fajnie jakbyś napisał czy można takim sliderem pochwalić się na githuba czy jest beznadziejny i lepiej sobie odpuścić.

 

https://codepen.io/anon/pen/qybOvV