使用 swiper （或一些类似的库）滚动半个屏幕宽度

Question

我目前正在使用 swiper.js（this one, as there seem to be multiple libraries of that name). I'm trying to figure out how to set it up so that for one of its slides, it only scrolls the screen half a width. There's a demo 开发一个移动应用程序，它可以做一些与我想要的相似的事情，这对我来说应该有可能，但我不知道如何让它发挥作用。

为了给你更精确的细节，我想要的是这样的布局：

 +----+ +-----------+ +-----------+
 |    | | +---+---+ | |           |
 |    | | |   |   | | |           |
 |  A | | | B | C | | |     D     |
 |    | | |   |   | | |           |
 |    | | +---+---+ | |           |
 +----+ +-----------+ +-----------+

并且我希望能够使用滑动手势，以便可以通过以下任何方式定位视口：

+-------------+
|+----+ +-----+-----+ +-----------+
||    | | +---+---+ | |           |
||    | | |   |   | | |           |
||  A | | | B | C | | |     D     |
||    | | |   |   | | |           |
||    | | +---+---+ | |           |
|+----+ +-----+-----+ +-----------+
+-------------+

       +-------------+
 +----+|+-----+-----+|+-----------+
 |    ||| +---+---+ |||           |
 |    ||| |   |   | |||           |
 |  A ||| | B | C | |||     D     |
 |    ||| |   |   | |||           |
 |    ||| +---+---+ |||           |
 +----+|+-----+-----+|+-----------+
       +-------------+

                     +-------------+
 +----+ +-----+-----+|+-----------+|
 |    | | +---+---+ |||           ||
 |    | | |   |   | |||           ||
 |  A | | | B | C | |||     D     ||
 |    | | |   |   | |||           ||
 |    | | +---+---+ |||           ||
 +----+ +-----+-----+|+-----------+|
                     +-------------+

我设法让前两个视图配置正常工作，方法是更改样式设置以删除 swiper-slide class 上的 width: 100% 并使用 slidesPerView: "auto" 配置设置，但随后从第二个视图向右滑动屏幕会显示 C 和 D 的一半，并且您无法再滑动，因此无法看到所有 D。

我怎样才能让它工作？如果绝对必要，我不反对切换到不同的库。

Answer 1

事实证明，答案几乎正是我最初期望的结果：

var swiper = new Swiper ('.swiper-container', {
    slidesPerView: "auto"
  });

.swiper-container {
    width: 300px;
    height: 400px;
}   
.swiper-slide {
  height: 400px;
  border: 1px solid red;
}

.swiper-slide > div { 
  height: 100%;
  border: 1px solid blue;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide" style="width:150px">A</div>
        <div class="swiper-slide" style="display:flex; flex-flow: row nowrap">
           <div style="flex-grow: 1">B</div><div style="flex-grow: 1">C</div>
        </div>
        <div class="swiper-slide">D</div>
    </div>
</div>

我没能立即让它工作的唯一原因是因为我正在使用库的包装器将它与 React 集成，这会创建一个额外的 div，这意味着我的设置不是正确覆盖默认宽度。

使用 swiper （或一些类似的库）滚动半个屏幕宽度

using swiper (or some similar library) to scroll a half screen width

html

javascript

touch

swipe