Горизонтальная прокрутка не работает на мобильных веб-зрителях внутри Swiper - PullRequest
Новая
       36

Горизонтальная прокрутка не работает на мобильных веб-зрителях внутри Swiper

0 голосов
/ 28 января 2020

Я использую swiper-js (https://swiperjs.com/) для скольжения нескольких container. Внутри моего контейнера я поместил ползунок горизонтальной прокрутки маленького размера box. Я могу правильно перемещать их на настольных компьютерах, но не на мобильных веб-зрителях. Так что да, мне нужна помощь с этим. 

new Swiper(document.querySelector("div.swiper-container"), {
    direction: "horizontal",
    speed: 300,
    spaceBetween: 5,
    slidesPerView: 1,
    loop: false,
    cssMode: false,
    allowSlideNext: true,
    allowSlidePrev: true,
    centeredSlides: true,
    centeredSlidesBounds: true,
    updateOnWindowResize: true,
    centerInsufficientSlides: true,
    pagination: {
        el: document.querySelector("div.swiper-pagination"),
        clickable: true,
        hideOnClick: false,
        dynamicBullets: true
    },
    navigation: {
        nextEl: document.querySelector("div.swiper-button-next"),
        prevEl: document.querySelector("div.swiper-button-prev"),
        hideOnClick: false
    }
});
$('*').bind('touchmove', false);
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display:    -moz-box;
    display: -webkit-flex;
    display:  -ms-flexbox;
    display:         flex;
    -webkit-justify-content: center;
       -moz-justify-content: center;
            justify-content: center;
    -webkit-align-items: center;
            align-items: center;
} div.swiper-container {
    height: 75%;
    width: 90%;
} div.swiper-wrapper, div.swiper-slide {
    height: 100%;
    width: 100%;
} container {
    height: 100%;
    width: 100%;
    background-color: green;
    display: -webkit-box;
    display:    -moz-box;
    display: -webkit-flex;
    display:  -ms-flexbox;
    display:         flex;
    -webkit-justify-content: center;
       -moz-justify-content: center;
            justify-content: center;
    -webkit-align-items: center;
            align-items: center;
} container div {
    height: 50%;
    width: 50%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
} box {
    height: 100%;
    width: 95%;
    background-color: red;
    display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <container>
                    <div>
                        <box></box>
                        <box></box>
                        <box></box>
                    </div>
                </container>
            </div>
            <div class="swiper-slide">
                <container>
                    <div>
                        <box></box>
                        <box></box>
                        <box></box>
                    </div>
                </container>
            </div>
            <div class="swiper-slide">
                <container>
                    <div>
                        <box></box>
                        <box></box>
                        <box></box>
                    </div>
                </container>
            </div>
        </div>
    </div>
</body>
</html>

1 Ответ

0 голосов
/ 28 января 2020

Добавьте приведенный ниже код в ваш скрипт, и он будет отлично работать как на мобильных, так и на настольных компьютерах 

$('*').bind('touchmove', false);
...