我有一个垂直幻灯片(swiper.js库(，该幻灯片的高度为100％。
，但其中之一是由于长期满足...这导致幻灯片内容的底部不可读取，因为在滚动或向下滑动时，幻灯片总是会进展。内容应该是完全可读的，而不会损害桌面和移动设备上的滑动功能。
我尝试了什么：
- 嵌套幻灯片：它在台式机上运行正常，但在移动设备上是地狱。
- 打开FreeMode：工作，但不为幻灯片提供捕捉功能。
- freemode with freemodesticky：与常规滑块功能相同的问题。
进一步尝试＆amp;思想：
我尝试过切换freemode：开着，当当前幻灯片长于视口和关闭时，当没有。但是，在活动时，Swiper实例似乎不允许更改模式。我还尝试了Swiper_instance.update((，但没有盛行。
我仍然觉得这种方法很有希望。您是否知道一种切换FreeMode的方法？
您还有其他方法，我可以尝试吗？
代码在下面，以及https://codepen.io/eigenderartige/pen/ddevpa
$(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
});
});#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; }<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>您可以使用mySwiper.params.freeMode = boolean;更改Swiper FreeMode参数，然后使用mySwiper.update();使用新设置更新您的swiper。
还将slidesPerView: 'auto'添加到您的刀片设置中以适应更长的第一幻灯片。
这是一个快速示例：https：//codepen.io/anon/pen/rqyzvk