我在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/

10-12 12:24
查看更多