Блог

Главная - Вопросы по программированию - Изменение поведения слайдера галереи

Изменение поведения слайдера галереи

#javascript #slider #gallery #swiper

#javascript #слайдер #Галерея #swiper.js

Вопрос:

Я только начал заниматься разработкой. Я пытаюсь настроить слайдер из библиотеки (https://swiperjs.com ), чтобы лучше соответствовать моей странице. По умолчанию он поставляется со стрелками слева и справа, чтобы вызвать перемещение слайдера..

Теперь я хотел бы изменить его так, чтобы слайдер продвигался вперед каждый раз, когда пользователь нажимает в любом месте области изображения.

Что у меня есть до сих пор:

 var mySwiper = new Swiper('.swiper-container', {
                // parameters
                direction: 'horizontal',
                loop: true,

                // pagination
                pagination: {
                    el: '.swiper-pagination',
                },

                // navigation
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                }, 
 <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"> <img src="source/promo_1.png" alt="promo-1" class="image"></div>
            <div class="swiper-slide"> <img src="source/promo_2.png" alt="promo-2" class="image"></div>
            <div class="swiper-slide"> <img src="source/promo_3.png" alt="promo-3" class="image"></div>

        </div>
        <div class="swiper-pagination"></div>

        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

Есть идеи, как я могу этого добиться? Имеет ли смысл вообще перезаписывать поведение библиотеки или мне следует искать альтернативу? Для меня вся эта библиотека — что-то вроде черного ящика.

Большое спасибо!

Метки: