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

animacja slider

–1 głos
78 wizyt
pytanie zadane 22 września 2018 w JavaScript, jQuery, AJAX przez fyrr Użytkownik (660 p.)

Witam, mam problem odnośnie dodania prostej animacji przejścia jednego zdjęcia w kolejne na sliderze. Chodzi o to, że za każdym razem po wciśnięciu na strzałkę w lewo lub w prawo chciałbym nadać jakieś lekkie opacity na kolejny element img żeby  zmiana nie była natychmiastowa tylko np. 0.5s. Napisałem sobie taki kodzik w jsie: 

function slideLeft() {

    slideAnim();

    index--;

    if (index < 0) {
        index = photos.length - 1;
        actualSlide.src = photos[index];

    } else {
        actualSlide.src = photos[index];
    }

}

function slideRight() {

    slideAnim();

    if (index == photos.length - 1) {
        index = -1;
    }

    index++;
    actualSlide.src = photos[index];
}

function slideAnim() {
    actualSlide.classList.toggle('active');
}

leftBar.addEventListener('click', slideLeft)
rightBar.addEventListener('click', slideRight)

W cssie mam: 

.slide {
    width: 100%;
    height: 100%;
}

.slide.active {
    animation: slide .5s linear;
}

@keyframes slide {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}


Odwołuję się do znacznika img o klasie .slide: 

<div class="sliderBox clearfix">
                <div class="barL"><i class="fas fa-angle-left"></i></div>
                <div class="slider"><img class="slide" src="img/projects/1.jpg" alt="furniture"></div>
                <div class="barR"><i class="fas fa-angle-right"></i></div>
            </div>

Problem polega na tym, że animację dodaje mi tylko na co drugie zdjęcie, rozumiem że to przez metodę toggle. Teraz pojawia się pytanie jak dodawać animację za każdym razem. 

1 odpowiedź

+2 głosów
odpowiedź 22 września 2018 przez arces Pasjonat (17,720 p.)
Można zrobić tak, że najpierw dodajesz klasę do danego elementu, która odpowiada za animację. A następnie po zakończeniu animacji tę klasę usuwa. Przy addEventListener jest event transitionend i wtedy właśnie napisać funkcję, która będzie usuwała daną klasę dotyczącą animacji.

Warto też po prostu przejrzeć najpopularniejsze skrypty slider'ów i zobaczyć jak tam to jest rozwiązane :)
komentarz 22 września 2018 przez fyrr Użytkownik (660 p.)
Dzięki za ukierunkowanie !

Podobne pytania

0 głosów
1 odpowiedź 37 wizyt
pytanie zadane 3 dni temu w JavaScript, jQuery, AJAX przez Roza Pasjonat (17,840 p.)
0 głosów
1 odpowiedź 72 wizyt
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

61,302 zapytań

107,232 odpowiedzi

223,311 komentarzy

32,791 pasjonatów

Przeglądających: 282
Pasjonatów: 10 Gości: 272

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.

...