Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> slider - dodanie klas
klawisz123
post 23.02.2021, 13:06:15
Post #1





Grupa: Zarejestrowani
Postów: 30
Pomógł: 0
Dołączył: 24.05.2013

Ostrzeżenie: (0%)
-----


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.
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 13:55