Question

我正在使用Angular和idangerous swiper（http://idangero.us/swiper/）。我的目标是实现以下行为：https://www.w3schools.com/howto/howto_css_parallax.asp

我尝试在文章中使用它：

<div class="container">
  <swiper [config]="config">
    <div class="image" style="background-image: url('../../assets/images/item1.jpg')"></div>
    <div class="image" style="background-image: url('../../assets/images/item2.jpg')"></div>
    <div class="image" style="background-image: url('../../assets/images/item3.jpg')"></div>
  </swiper>
</div>

CSS文件：

.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.image {
  width: 100vw;
  height: 100vh;

  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

swiper的配置：

config: Object = {
    autoplay: {
      delay: 10000,
      disableOnInteraction: false,
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
    },
    effect: "fade",
    speed: 2000,
    parallax: true,
  };

不幸的是，添加了背景附件：固定;似乎破坏了swiper的行为 - 它总是只显示第一张图像，即使点击分页后也是如此。是否禁止在swiper中使用此属性？是否还有其他选项可以在此示例中进行视差滚动？

视差滚动与swiper

0 个答案: