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

使用idangerous swiper进行视差滚动效果

1 个答案: