Вертикальная кнопка прокрутки во вложенном Swiper - PullRequest
Новая
       25

Вертикальная кнопка прокрутки во вложенном Swiper

0 голосов
/ 08 июля 2019

Я хочу создать вертикальную кнопку прокрутки (прокрутка вниз / вниз) во вложенном слайдере.Мой слайдер выглядит так: 

var swiperH = new Swiper('.swiper-container-h', {
    effect: 'fade',
    fadeEffect: {
            crossFade: true
    },
    direction: 'horizontal',
    loop: true,
        speed: 800,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    keyboard: {
            enabled: true,
            onlyInViewport: true,
    },
});

var swiperV = new Swiper('.swiper-container-v', {
    speed: 800,
        direction: 'vertical',
    keyboard: {
            enabled: true,
            onlyInViewport: true,
    },
    mousewheel: {
            invert: false,
    },
});

<!-- Swiper -->
<div class="swiper-container swiper-container-v">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="swiper-container swiper-container-h">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><h1>Slide 1</h1></div>
                    <div class="swiper-slide"><h1>Slide 2</h1></div>
                    <div class="swiper-slide"><h1>Slide 3</h1></div>
                    <div class="swiper-slide"><h1>Slide 4</h1></div>
                    <div class="swiper-slide"><h1>Slide 5</h1></div>
                </div>

                <!-- Scroll Down Button -->

                <a href="#" class="scroll-down-button">Scroll Down Button</a>

            </div>
        </div>
        <div class="swiper-slide bg-gradient-06">Slide 6</div>
        <div class="swiper-slide bg-gradient-07">Slide 7</div>
        <div class="swiper-slide bg-gradient-08">Slide 8</div>
        <div class="swiper-slide bg-gradient-09">Slide 9</div>
        <div class="swiper-slide bg-gradient-10">Slide 10</div>
    </div>
</div>

.scroll-down-button  {
        border-style: none;
        bottom: 25px;
        box-sizing: border-box;
        color: #3555ff;
        display: block;
        height: auto;
        left: 50%;
        opacity: 1;
        overflow: visible;
        padding: 0;
        position: absolute;
        text-align: center;
        text-decoration: none;
        vertical-align: baseline;
        width: 60px;
        z-index: 100;
}

Итак, моя кнопка прокрутки вниз получила абсолютное позиционирование.Это видно на горизонтальных слайдах.Поэтому я хочу, чтобы он прокручивал до первого вертикального слайда по клику.Как я могу это сделать?

Извините, что разместил мой вопрос здесь.На форуме слишком много вопросов без ответов.

Мой код: https://codepen.io/p3tr0ff/pen/bPQVqy

...