Делаем переход Swiper Slider однонаправленным - PullRequest
Новая
       25

Делаем переход Swiper Slider однонаправленным

0 голосов
/ 31 октября 2018

Я собрал изображение карусели с помощью 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, включая форум, но не смог найти способ сделать ее однонаправленной . Как я мог это сделать?

1 Ответ

0 голосов
/ 10 ноября 2018

Может быть, это вам поможет, передайте параметр allowSlidePrev: false;.

Я никогда не использовал Swiper, но у меня нет возможности проверить, поэтому я не знаю, решит ли это вашу проблему с пулями, но теоретически это сделает ее однонаправленной.

...