Как добавить эффект Кена Бернса в Swiper?

Question

Я знаю, что можно добавить «эффект Кена Бернса» к Swiper, потому что я видел его на этом сайте: https://novibuilder.com/page-slider.html (примерно две трети пути вниз).Они предоставляют HTML-код, но не CSS-файлы и не JS-файлы, которые заставляют его работать.

Может кто-нибудь помочь мне добавить эффект Кена Бернса в Swiper?Я хочу оставаться в сфере свободного и открытого исходного кода.

HTML:

  <div class="swiper-container swiper-slider swiper-scale-effect"> 
    <div class="swiper-wrapper">

      <div class="swiper-slide slide1">Slide 1</div>
      <div class="swiper-slide slide2">Slide 2</div>
      <div class="swiper-slide slide3">Slide 3</div>
      <div class="swiper-slide slide4">Slide 4</div>

    </div>
  </div>


  <script>
    var swiper = new Swiper('.swiper-container', {
      spaceBetween: 30,
      centeredSlides: true,
      effect: 'fade',
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>

CSS:

    .swiper-container {
  width: 100%;
  height: 100%;

}
.swiper-slide {
  text-align: center;
  font-size: 18px;


  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.slide1 {
background-image: url(images/bg_1.jpg);
background-position: center; 
}
    .slide2 {
background-image: url(images/bg_2.jpg);
background-position: center; 
}
    .slide3 {
background-image: url(images/bg_3.jpg);
background-position: center; 
}
    .slide4 {
background-image: url(images/bg_4.jpg);
background-position: center; 
}   

Не уверен, что нужно сделать, чтобы получить масштабированиеэффект работает.Изображения исчезают друг на друга, как и должно быть.

Answer 1

Это делается с помощью CSS:

.swiper-scale-effect .swiper-slide-cover {
  transition: 8.5s ease-out;
  transform: scale(1.08);
}

.swiper-scale-effect .swiper-slide.swiper-slide-active .swiper-slide-cover {
  transform: scale(1);
}

... что означает: когда .swiper-scale-effect получает класс swiper-slide-active (что происходит, когда слайд становится активным), если слайдер имеет swiper-scale-effect класс, .swiper-slide-cover будет переходить с scale(1.08) на scale(1) в течение периода времени 8.5s.

Чтобы изменить способ панорамирования слайдов (на самом деле это масштабирование), вам нужно управлять свойством transform-origin соответствующего слайда.

Не думаю, что это часть самого слайдера.На этом сайте это часть огромного пользовательского файла CSS: style.css (имеет 44.338 строк).

---

Вот пример:

var swiper = new Swiper('.swiper-container', {
  spaceBetween: 30,
  centeredSlides: true,
  effect: 'fade',
  autoplay: {
    delay: 8500,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-slide > .swiper-slide-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent no-repeat 50% 50% /cover;
}
.swiper-container {
  max-width: 800px;
  height: 300px;
}
body {
  text-align: center;
}
.swiper-slide .slide1 {
  background-image: url(https://picsum.photos/800/400?image=670);
  transform-origin: 0 100%;
}

.swiper-slide .slide2 {
  background-image: url(https://picsum.photos/800/400?image=837);
  transform-origin: 100% 100%;
}

.swiper-slide .slide3 {
  background-image: url(https://picsum.photos/800/400?image=947);
  transform-origin: 100% 0;
}

.swiper-slide .slide4 {
  background-image: url(https://picsum.photos/750/250?image=945);
  transform-origin: 0 100%;
}
.swiper-scale-effect .swiper-slide-cover {
  transition: 10s ease-out;
  transform: scale(1.2);
}

.swiper-scale-effect .swiper-slide.swiper-slide-active .swiper-slide-cover {
  transform: scale(1);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.min.js"></script>

<div class="swiper-container swiper-scale-effect">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">
      <div class="slide1 swiper-slide-cover"></div>
      <div>Slide 1</div>
    </div>
    <div class="swiper-slide">
      <div class="slide2 swiper-slide-cover"></div>
      <div>Slide 2</div>
    </div>
    <div class="swiper-slide">
      <div class="slide3 swiper-slide-cover"></div>
      <div>Slide 3</div>
    </div>
    <div class="swiper-slide">
      <div class="slide4 swiper-slide-cover"></div>
      <div>Slide 4></div>
    </div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>