javascript - 使 Swiper Slider 的过渡单向

问题描述

我在Swiper的帮助下制作了一个图像轮播。

我的轮播使用背景图片、项目符号和垂直过渡。我希望这种垂直过渡是单向的。换句话说，轮播的过渡方向应该是向上的，而不管点击的子弹的先后顺序。

var swiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    auto: true,
    speed: 1000,
    loop: true,
    autoplay: {
        delay: 9000,
        disableOnInteraction: false,
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    controller: {
        inverse: true,
    }
});

.swiper-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    height: 265px;
}

.swiper-wrapper {
    height: 265px;
}

.swiper-slide {
    transition: 1s ease-in-out;
    top: 0;
    width: 100%;
    height: 265px;
    background-repeat: no-repeat;
    background-position: center center;
}

.swiper-slide img {
    margin: 0 auto;
    width: 620px;
    height: 265px;
}

.swiper-container-vertical>.swiper-pagination-bullets {
    bottom: 0;
    top: auto !important;
}

.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 !important;
    outline: none;
    opacity: 1;
    float: left;
    width: 18px;
    height: 18px;
    background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
}

.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-position: -528px -524px;
}

<link href="https://necolas.github.io/normalize.css/8.0.0/normalize.css" rel="stylesheet"/>
<link href="https://idangero.us/swiper/dist/css/swiper.css" rel="stylesheet" />
<script src="https://idangero.us/swiper/dist/js/swiper.min.js"></script>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=east');">
            <img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
        </a>
        <a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=south');">
            <img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
        </a>
        <a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=west');">
            <img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
        </a>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>

我一直在 Swiper 网站上寻找信息，包括论坛，但找不到使其单向的方法。我怎么能那样做？

标签： javascripthtmlcsscarouselswipe

javascript - 使 Swiper Slider 的过渡单向

问题描述

解决方案

推荐阅读