带有危险滑动器的视差滚动效果

Question

我在 Angular 中使用了 idangerous 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;
}

这个效果是不是可以实现，还是我做错了什么？

Answer 1

您必须在配置中启用视差。

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