Эффект прокрутки параллакса с помощью опасного swiper - PullRequest
Новая
       14

Эффект прокрутки параллакса с помощью опасного swiper

0 голосов
/ 30 апреля 2018

Я использую опасный swiper в Angular, и я хотел добиться эффекта, описанного в 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: 

  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;
}

Возможно ли даже добиться этого эффекта, или я делаю что-то не так?

1 Ответ

0 голосов
/ 30 апреля 2018

Вам нужно будет включить параллакс в конфиге. 

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

...