我在Angular中使用了危险的swiper,我想实现https://www.w3schools.com/howto/howto_css_parallax.asp中所述的效果。
我的HTML文件:
<div class="container">
<swiper [config]="config">
<img class="image" src="../assets/images/item1.jpg">
<img class="image" src="../assets/images/item2.jpg">
</swiper>
</div>
配置:
config: Object = {
autoplay: {
delay: 10000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
effect: "fade",
speed: 2000,
};
我还按照教程中的描述添加了background-attachment属性,但似乎完全没有效果。
.image {
width: 100%;
height: 100%;
background-attachment: fixed;
}
是否有可能达到这种效果,或者我做错了什么?
最佳答案
您将必须在配置中启用视差。
config: Object = {
autoplay: {
delay: 10000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
parallax: true,
speed: 2000,
};
演示在这里可用:http://idangero.us/swiper/demos/360-parallax.html
关于html - 视差滚动效果与危险的滑行,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50097634/