Вложенный дочерний swiper проводит к следующему / предыдущему родительскому swiper при нажатии или следующей / предыдущей кнопке - PullRequest
Новая
       14

Вложенный дочерний swiper проводит к следующему / предыдущему родительскому swiper при нажатии или следующей / предыдущей кнопке

0 голосов
/ 28 сентября 2018

У меня есть 6 родительских слайдеров, каждый из которых состоит из дочернего слайдера с несколькими (от 5 до 6) слайдами.На мобильном устройстве он показывает 1 на 1.

. Сейчас требуется, чтобы пользователь проводил по самому краю контейнера, чтобы провести к следующему родительскому свиперу, а кнопки «предыдущий / следующий» предназначены только для слайдов.на родительском свайпере.

Как мне сделать так, чтобы:

(1) Кнопки со стрелками плавно работали на всех слайдах дочерних ползунков (т. Е. Когда это на последнем слайде дочернего элемента-1,нажатие кнопки со следующей стрелкой переходит к первому слайду ребенка-2)

(2) Смахивание на мобильном телефоне также происходит без проблем, например (1)

Для получения более подробной информации см. https://codepen.io/aahlfeeyann/pen/dgyddO,и проверьте код здесь: 

<div class="swiper-container swiper-container-parent">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="swiper-container swiper-container-child-1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"></div>
                    <div class="swiper-slide"></div>
                    .
                    .
                    .
                </div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper-container swiper-container-child-2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"></div>
                    <div class="swiper-slide"></div>
                    .
                    .
                    .
                </div>
            </div>
        </div>
        .
        .
        .
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
 </div>

 <script>
     var mySwiperChild1 = new Swiper('.swiper-container-child-1', {
        slidesPerView: 3,
        slidesPerGroup: 3,
        spaceBetween: 80,
        grabCursor: true,
        breakpoints: {
            480: {
                slidesPerView: 1,
                slidesPerGroup: 1,
                spaceBetween: 30
            },
            640: {
                slidesPerView: 2,
                slidesPerGroup: 2,
                spaceBetween: 40
            }
        }
    });

    var mySwiperChild2 = new Swiper('.swiper-container-child-2', {
        slidesPerView: 3,
        slidesPerGroup: 3,
        spaceBetween: 80,
        grabCursor: true,
        breakpoints: {
            480: {
                slidesPerView: 1,
                slidesPerGroup: 1,
                spaceBetween: 30
            },
            640: {
                slidesPerView: 2,
                slidesPerGroup: 2,
                spaceBetween: 40
            }
        }
    });

    var mySwiperParent = new Swiper('.swiper-container-parent', {
        grabCursor: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        breakpoints: {
            480: {
                slidesPerView: 1,
                slidesPerGroup: 1,
                spaceBetween: 30
            },
            640: {
                slidesPerView: 2,
                slidesPerGroup: 2,
                spaceBetween: 40
            }
        }
    });
 </script>
...