如何将 "Ken Burns Effect" 添加到 Swiper？

Question

我知道可以将 "Ken Burns Effect" 添加到 Swiper，因为我在这个网站上看到过它：https://novibuilder.com/page-slider.html（大约向下的三分之二）。他们提供 HTML 代码，但不提供 CSS 或使其工作的 JS 文件。

谁能帮我把 Ken Burns Effect 添加到 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 获得 class swiper-slide-active（这是当幻灯片处于活动状态时发生的情况），如果滑块具有 swiper-scale-effect class，.swiper-slide-cover 将在 8.5s 的时间段内从 scale(1.08) 过渡到 scale(1)。

要更改幻灯片平移的方式（实际上是缩放），您需要控制相应幻灯片的 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>

如何将 "Ken Burns Effect" 添加到 Swiper？

How can I add the "Ken Burns Effect" to Swiper?

javascript

css

jquery

swiper