poprawny slider z użyciem metody scrollIntoView.

Question

Cześć.

Mój problem polega na tym , że podczas gdy mój slider znajduje się na ostatnim slidzie to chciałbym uzyskać efekt aby następny slide wysuwał się z prawej strony , a w moim kodzie to działa tak ,że z tego ostatniego slidu przewija przez wszystkie aż dojdzie do tej lewej strony , standardowo problem działa w obie strony , czyli jeśli jestem na 1 slidzie i kliknę w left-arrow to przewinie mi wszystkie slidy aż dojdzie do ostatniego. Chciałbym , żeby do działało tak jak jest np. na tej stronie(https://clobbercartelz.com). Nie mam zbytnio pomysłu na to jak to zrobić , liczę na wskazówki. Jedyne nad czym myślałem , że można jakoś liniowo ten slide przerzucić , ale z tego co wiem to chyba jak użyję pozycjonowania absolutnego to scrollIntoView się nie wykona?(możecie na to pytanie również odpowiedzieć), jest jeszcze jakaś opcja z orderem , ale raczej samo rozwiązanie jest dużo łatwiejsze niż ja tutaj zaczynam kombinować więc dlatego wolę was zapytać , z góry dzięki za odpowiedzi :)

let currentSlide = 0;

rightArrow.addEventListener('click', function () {
    currentSlide++;
    if (currentSlide === slides.length) {
        currentSlide = 0;
// sytuacja z moim problemem;
    }
    slides[currentSlide].scrollIntoView({
        behavior: 'smooth',
        display: 'start',
    });
})
leftArrow.addEventListener('click', function () {
    currentSlide--;
    if (currentSlide < 0) {
        currentSlide = slides.length - 1;
//sytuacja z moim problemem;
    }
    slides[currentSlide].scrollIntoView({
        behavior: 'smooth',
        display: 'start',
    })
})

 

Comments

Przydałoby się, żebyś pokazał w miarę pełny kod, aby można było go uruchomić i przetestować - możesz ewentualnie całe demo podlinkować od razu na np. CodePen lub JSFiddle.

---

https://codepen.io/krzysi0x2/pen/RwGEEYJ

Jasne , tylko trzeba images podmienić żeby hulało. Kod jak najbardziej standardowy , chciałem się obeznać z metodą i rozwiązać ten problem.

Answer 1

Udało mi się połowicznie rozwiązać moje zadanie , zrezygnowałem z metody scrollIntoView i całość sam animuje za pomocą metody transition , cały slider działa bardzo sztywno ponieważ ustalam dla każdego elementu metodę left , dodatkowo na sztywno ustalam każdego elementowi transition , ponieważ kiedy pierwszy element ma -100% left i przemieszcza się na left 100% to wtedy przejeżdża mi z lewej strony do prawej... Dodatkowo dodałem flagę , żeby nikt mi nie zaspamował zmian slidu(arrow) bo wtedy cały slider się rozjeżdża ponieważ jedno przewinięcie ma 1s , a jak w tym czasie kliknę kilka razy w jakiś arrow to powoduje mi to słaby efekt. Na dole wrzucam codepen do wszystkich plików , jakby ktoś mógł sprawdzić to byłoby mi miło :)

https://codepen.io/krzysi0x2/pen/BaLMjGv

Mam kilka pytań. Czy da się taki efekt uzyskać poprzez metodę ScrollIntoView() ? czy to moje rozwiązanie jest optymalne do tego slidera czy można to zrobić w lepszy sposób ?

Answer 2

Narzuca mi się, że najprościej  po wykonaniu przejścia do kolejnego slajdu przenieść pierwszy na koniec np. za pomocą appendChild(), ale to nie działa ponieważ widoczny slajd traci swój index i w jego miejsce pojawia się kolejny. Więc ta metoda (scrollIntoView())raczej jest nieodpowiednia do tego zadania.

 

Comments

Próbowałem zrobić za pomocą metody order i przenieść slajd pierwszy na sam koniec , ale to nie jest rozwiązanie , ponieważ jak jestem na ostatnim slidzie to z prawej strony nie mam żadnego elementu więc nie jestem w stanie wymusić aby mi jakiś element wyjechał z prawej strony. Nie mam więcej pomysłów w jaki sposób można by się za to zabrać.Dzięki za odpowiedz.

Answer 3

Kod Moim zdaniem do poprawienia nie obsługuje prawidłowo więcej niż 3 obrazki  (musi być bardziej uniwersalny, bez ustawień na "sztywno")

            <section>
                <img src="https://source.unsplash.com/240x341" alt="" class="slide1">
            </section>
            <section>
                <img src="https://source.unsplash.com/240x342" alt="" class="slide2">
            </section>
            <section>
                <img src="https://source.unsplash.com/240x343" alt="" class="slide3">
            </section>
            <section>
                <img src="https://source.unsplash.com/240x344" alt="" class="slide4">
            </section>
            <section>
                <img src="https://source.unsplash.com/240x345" alt="" class="slide5">
            </section> 

 

Comments

Masz oczywiście racje , ale nie wiem czy w moim slidzie można go zrobić bardziej uniwersalnym , jeśli dodamy nowy slide to muszę mu nadać właściwość left w css , a potem w każdej możliwej kombinacji na sztywno zmieniać mu to left , więc w moim rozwiązaniu bym musiał całość usunąć i zrobić to po prostu inaczej , dlatego moje pytanie brzmiało czy taki slider z pożądanych efektem da się zrobić w inny sposób niż ja to zrobiłem , możecie podsunąć jakieś pomysły.

---

Można css dynamicznie zmieniać, dodawać z poziomu js-a, choćby za pomocą classList, do operacji na wartościach css (obliczeniach) można wykorzystać np. zmienne css --nazwa-zmiennej i Window.getComputedStyle(), a obrazki przewijać po indeksie z tablicy np.:

PSEUDOKOD JS

const img_transition_variables = document.documentElement;

const imgs_arr = ['240x341','240x342','240x343'];
const imgs = document.querySelector('.slider img');

let index = 0;

imgs.forEach((img) => {
    img.setAttribute('src',`https://source.unsplash.com/${imgs_arr[index]}`);

    if (img.classList.contains('class1') {
        img.classList.remove('class2');
    } else {
        const slides = document.querySelectorAll('section');
        const compStyles = window.getComputedStyle(slides[0]);
        let comp_left = compStyles.getPropertyValue('left');

        ...
        
        img.style.setProperty('left', comp_left);

        ...

        img_transition_variables.style.setProperty('--img-transition', '1s');
    }
    ...

}

const imgs_count = imgs.length;

imgs[1].classList.add('class3');

...

 

---

Jeśli obrazki będę zmieniać poprzez atrybut src korzystając z indexu i tablicy to uzyskam slider tzw. fade , nie zrobię z tego przejść żeby mi następny/poprzedni slide wchodził z lewej/prawej strony. Odnośnie użytej metody(u mnie to .style.metoda(liniowo))  to chyba nie ma dużej różnicy jakby miał to zrobić za pomocą setProperty, czy korzystając ze zmiennych cssa , odnośnie uniwersalności to w moim rozwiązaniu nie zrobię tego bardziej uniwersalnego ponieważ tak czy siak jak dodam nowy slide to muszę mu nadać odpowiedni left początkowy w css i potem przy każdym currentSlide(index) to musze każdemu elementowi nadać odpowiedni left