• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Slider nie działa

0 głosów
75 wizyt
pytanie zadane 8 lipca 2018 w JavaScript, jQuery, AJAX przez bicnet Gaduła (4,110 p.)

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

1 odpowiedź

0 głosów
odpowiedź 8 lipca 2018 przez Tomek Sochacki Mędrzec (175,420 p.)
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;
});

 

komentarz 12 lipca 2018 przez Tomek Sochacki Mędrzec (175,420 p.)

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ć :)

komentarz 12 lipca 2018 przez bicnet Gaduła (4,110 p.)
Tak chyba będzie najszybciej:

https://codepen.io/anon/pen/djoMPM
komentarz 12 lipca 2018 przez Tomek Sochacki Mędrzec (175,420 p.)
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ć.
komentarz 12 lipca 2018 przez bicnet Gaduła (4,110 p.)
Okej, coś porobię żeby działało. Dzięki za pomoc.
komentarz 15 lipca 2018 przez bicnet Gaduła (4,110 p.)

@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

 

Podobne pytania

0 głosów
0 odpowiedzi 51 wizyt
0 głosów
1 odpowiedź 127 wizyt
0 głosów
1 odpowiedź 163 wizyt
pytanie zadane 26 września 2016 w JavaScript, jQuery, AJAX przez agnieshax Nowicjusz (120 p.)
Porady nie od parady
Nie wiesz jak poprawnie zredagować pytanie lub pragniesz poznać którąś z funkcji forum? Odwiedź podstronę Pomoc (FAQ) dostępną w menu pod ikoną apteczki.FAQ

63,239 zapytań

109,483 odpowiedzi

228,714 komentarzy

43,293 pasjonatów

Przeglądających: 272
Pasjonatów: 12 Gości: 260

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...