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

我目前正在开发一个使用swiper.js（this one，因为似乎有多个该名称的库）的移动应用程序。我试图弄清楚如何设置它，以便它的幻灯片中只有一半的宽度可以滚动屏幕。有一个demo，做什么类似到我想要的，这表明我应该有可能，但我不知道如何使其工作。使用swiper（或一些类似的库）滚动半屏宽度

为了让您更精确的细节，我要的是有一个布局，看起来像这样：

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

，我希望能够用滑动手势，使视口可以放置在任何通过以下方式：

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

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

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

我设法通过更改样式设置对swiper-slide类别中删除width: 100%和使用slidesPerView: "auto"配置setti权工作的前两个视图配置ng，但从第二个视图向右滑动会使屏幕显示C和D的一半，并且无法进一步滑动，因此无法将所有D都放到视图中。

我该如何得到这个工作？如果绝对必要的话，我不反对切换到不同的库。

来源

2017-08-27 Jules

添加一个其他人可以玩的基本示例（jsfiddle/snippet）...没有人会为你构建这个，但是基本结构会更容易找到问题并提出解决方案。 – Dekel

@Dekel - 我正在研究一个，但它需要一段时间从相当大的应用程序中提取相关位... – Jules

我相信它可能需要时间。下一次，我建议你一旦你拥有了所需的所有东西，就打开这个问题:)和你花时间创建ascii样本完全一样，在这种情况下，一个片段几乎是一个需求:) – Dekel

原来答案是几乎正是我最初期望的工作：

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，这意味着我的设置不能正确覆盖默认宽度。

来源

2017-08-28 00:43:19 Jules

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

回答

相关问题