如何在Swiper.js中的幻灯片上应用固定位置

Question

假设我有一个用idangerous Swiper.js库创建的简单swiper。这是codepen link和jsfiddle link我如何制作它以便幻灯片保持固定并且滚动期间下面的内容在幻灯片上移动？我曾尝试搞乱位置：固定和一些Parallax库。显然位置：固定的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%;
}

Simple Example based on your code.