如何在滑动器.js中在幻灯片上应用固定位置

Question

假设我有一个简单的刷卡器，使用idangerous Swipeper.js库创建。这是代码笔链接和jsfiddle链接 如何使幻灯片保持固定，并且下面的内容在滚动过程中移动到幻灯片顶部？我尝试过弄乱位置：固定和一些视差库。显然位置：固定的 css 属性不适用于转换后的元素。

.HTML：

<div class="content">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image: url(https://source.unsplash.com/random?sig=24);">
</div>
<div class="swiper-slide" style="background-image: url(https://source.unsplash.com/random?sig=53);"> 
</div>
<div class="swiper-slide" style="background-image: url(https://source.unsplash.com/random?sig=52);">
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati. Ut enim ad minim veniam, quis nostrud exercitati.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati. Ut enim ad minim veniam, quis nostrud exercitati.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati. Ut enim ad minim veniam, quis nostrud exercitati.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitati.</p> 
</div>

.CSS：

.swiper-slide {
background-size: cover;
background-position: 50%;
min-height: 80vh;
}

.JS：

var Swipes = new Swiper('.swiper-container', {
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
});

Answer 1

transition

在将element放置在文档布局中后起作用。
所以 要解决问题 ，您必须将position:fixed设置为swiper-container。

.swiper-container{
position:fixed;
top:0;
left:0;
width:100%;
}

基于您的代码的简单示例。