1

Помогите разобраться, на странице имеется слайдер-карусель, мне он нравится, простой, ничего лишнего, хотел сделать еще один такой же слайдер с другим контентом, но на втором слайдере не работают кнопки прокрутки. Пытался прописать через ID , но не получилось, на одном слайдере кнопки работают, а на другом нет.

Скрипт:

<script>
    const testimonials = document.querySelector('.testimonials');
    const scroller = testimonials.querySelector('.scroller');
    const nextBtn = testimonials.querySelector('.btn.next');
    const prevBtn = testimonials.querySelector('.btn.prev');
    const itemWidth = testimonials.querySelector('.item').clientWidth;

    nextBtn.addEventListener('click', scrollToNextItem);
    prevBtn.addEventListener('click', scrollToPrevItem);

    function scrollToNextItem() {
        if(scroller.scrollLeft < (scroller.scrollWidth - itemWidth))
            // The scroll position is not at the beginning of last item
            scroller.scrollBy({left: itemWidth, top: 0, behavior:'smooth'});
        else
            // Last item reached. Go back to first item by setting scroll position to 0
            scroller.scrollTo({left: 0, top: 0, behavior:'smooth'});
    }
    function scrollToPrevItem() {
        if(scroller.scrollLeft != 0)
            // The scroll position is not at the beginning of first item
            scroller.scrollBy({left: -itemWidth, top: 0, behavior:'smooth'});
        else
            // This is the first item. Go to last item by setting scroll position to scroller width
            scroller.scrollTo({left: scroller.scrollWidth, top: 0, behavior:'smooth'});
    }
</script>
1
  • querySelectorAll использовать надо, если у вас несколько объектов с одним классом. И с этим массивом объектов уже работать. 15 мар 2021 в 22:44

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.