Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: slider - dodanie klas
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
klawisz123
Witam,

Zaznaczę, że uczę się JS tym bardziej obiektowego

przerabiam slider, całość jest zrobiona na klasie z konstruktorem,

tak pokrótce pierwsza metoda generuje slider czyli:

- pobiera element który zamienimy na slider
- tworzy kontener(wrapper) dla slajdow
- pobiera elementy slajdów (dzieci wrappera)
- dodaje klase (slider__item) każdemu dziecku

następna metoda zmienia slidy, pokrótce dodaje klase active do aktualnego slidu:
  1. changeSlide(index) {
  2.  
  3. // petla po slajdach usuwająca klase active
  4. this.slides.forEach(slide => {
  5. slide.classList.remove("active");
  6. slide.setAttribute("hidden", true);
  7. });
  8.  
  9. //dodanie tylko wykrytemu
  10. this.slides[index].classList.add("active");
  11. this.slides[index].setAttribute("hidden", false);
  12.  
  13. //aktualny slider przestawiany na wybrany
  14. this.currentSlide = index;
  15.  
  16. }


Chciałbym dodać klase before i after tj. przed i po active, myślę zrobić to dość prosto na ifach smile.gif (skupiam się tylko na before, after bedzie analogicznie)

  1. this.slides.forEach(slide => {
  2. slide.classList.remove("active");
  3. slide.setAttribute("hidden", true);
  4. slide.classList.remove("before");
  5. });
  6.  
  7. //dodanie tylko wykrytemu
  8. this.slides[index].classList.add("active");
  9. this.slides[index].setAttribute("hidden", false);
  10.  
  11. let last = this.slides.length - 1;
  12.  
  13. // dodanie klas przed i po
  14. let tmp=this.slides[index];
  15. if (tmp == 0 ) {
  16. this.slides[index + last].classList.add("before");
  17. } else {
  18. this.slides[index - 1].classList.add("before");
  19. }
  20. //aktualny slider przestawiany na wybrany
  21. this.currentSlide = index;
  22. }


Nie wiem dlaczego if tak działa, że pobiera tylko instrukcje z else? i faktycznie dodaje before ale dla slida 0 już nie.
Oczywiście w slidzie ją jeszcze metody prev, next, pagination.

Z góry dzięki za każdą pomoc.
nospor
A sprawdzales w ogole co zawiera TMP?
klawisz123
tak to wygląda w konsoli (dla tmp):

https://ibb.co/pLy9hR3

po przejściu (next) wszystkich slidów
nospor
I gdzie tam widzisz tmp rowne 0? Bo ja nigdzie. Czemu wiec sie dziwisz ze
if (tmp == 0)
ci nie dziala?
klawisz123
nom racja, tylko trzymałem się tego że działa instrukcja dla else, hmm ale ok już rozumiem, dzięki.

A jakaś mała podpowiedź smile.gif jak to ugryźć?

ok działa - zamiast tmp dałem this.currentSlide - takie banały ale przy nauce tak jest... dzięki za pomoc.

Serdecznie pozdrawiam smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.