假设我有一个使用危险的 Swiper.js 库创建的简单滑动器。这是 codepen link和 jsfiddle link我如何才能使幻灯片保持固定并且下面的内容在滚动过程中移动到幻灯片的顶部?我试过弄乱 position:fixed 和一些 Parallax 库。显然 position:fixed 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',
},
});
最佳答案
transition
在 element
放置在文档布局中后起作用。
因此,要解决这些问题,您必须将 position:fixed
设置为 swiper-container
。
.swiper-container{
position:fixed;
top:0;
left:0;
width:100%;
}
关于javascript - 如何在 Swiper.js 中的幻灯片上应用固定位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52358812/