Question

我有一个垂直幻灯片（swiper.js库），它的幻灯片是视口高度的100％。

但由于篇幅较长，其中一项更高...... 这导致幻灯片内容的底部不可读，因为当滚动或向下滑动时幻灯片总是前进。内容应该是完全可读的，而不会影响桌面和移动设备上的滑动功能。

我尝试过的事情：

嵌套幻灯片：它在桌面上运行正常，但在移动设备上却很糟糕。
启用Freemode：可以正常工作，但不会为幻灯片提供捕捉功能。
freemode with freeModeSticky：与常规滑块功能相同的问题。

进一步尝试＆amp;想法：

我试过切换Freemode：On，当前幻灯片比Viewport长时关闭，当没有时。但是，swiper实例似乎不允许模式更改，同时处于活动状态。我也尝试过swiper_instance.update（），但不会占上风。

我仍然觉得这种做法很有希望。你或许知道一种切换Freemode的方法吗？

你有其他办法，我可以试试吗？

代码如下，以及https://codepen.io/EigenDerArtige/pen/ddeVPa

＆＃13;

$(document).ready(function () {
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    slidesPerView: 'auto',
    scrollbar: {
      el: '.swiper-scrollbar',
      dragEl: '.swiper-scrollbar-drag',
      draggable: true
    },
    mousewheel: true
  });
});

＆＃13;

#wrapper {
  width:400px;
  height:600px;
  position:relative;
  background:blue;
  margin:0 auto;
  }
#wrapper .swiper-container {
    position:absolute;
    top:15px; bottom:15px; left:15px; right:15px;
}
#wrapper .swiper-container .swiper-wrapper .swiper-slide {
        padding:15px;
        box-sizing:border-box;
        height:auto !important;
        min-height:100%;
}
#wrapper .swiper-container .swiper-wrapper .swiper-slide.slide1 { background:lightgreen; }
#wrapper .swiper-container .swiper-wrapper .swiper-slide.slide2 { background:yellow; }
#wrapper .swiper-container .swiper-wrapper .swiper-slide.slide3 { background:lightblue; }

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/css/swiper.css" rel="stylesheet"/>

<main id="wrapper">
  <!-- Slider main container -->
  <div class="swiper-container">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
          <!-- Slides -->
          <div class="swiper-slide slide1">
            <h2>Beginning of long Slide</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            <h2>End of slide</h2>
          </div>
          <div class="swiper-slide slide2">Slide 2</div>
          <div class="swiper-slide slide3">Slide 3</div>
          ...
      </div>

      <!-- If we need scrollbar -->
      <div class="swiper-scrollbar"></div>
  </div>
</div>

＆＃13;

Answer 1

您可以使用mySwiper.params.freeMode = boolean;更改Swiper freemode参数然后，使用mySwiper.update();使用新设置更新Swiper。

同时将slidesPerView: 'auto'添加到您的Swiper设置中，以适应较长的第一张幻灯片。

以下是一个简单示例：https://codepen.io/anon/pen/RQyzVK

Swiper.js垂直幻灯片：如何处理垂直内容溢出？

1 个答案: