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

animacja slider

–1 głos
89 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ź 54 wizyt
pytanie zadane 19 marca w JavaScript, jQuery, AJAX przez niezalogowany
0 głosów
1 odpowiedź 76 wizyt
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

63,182 zapytań

109,417 odpowiedzi

228,573 komentarzy

42,836 pasjonatów

Przeglądających: 205
Pasjonatów: 15 Gości: 190

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.

...