Question

我知道可以在Swiper上添加“肯恩·伯恩斯效应”，因为我在以下网站上看到过它：https://novibuilder.com/page-slider.html（下降了大约三分之二）。它们提供HTML代码，但不提供使之起作用的CSS或JS文件。

有人可以帮助我将Ken Burns效果添加到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类，则{{1 }}将在.swiper-slide-cover的一段时间内从scale(1.08)过渡到scale(1)。

要更改幻灯片的平移方式（实际上是缩放比例），您需要控制相应幻灯片的8.5s属性。

我不认为这是滑块本身的一部分。在该网站上，它是一个庞大的自定义CSS文件的一部分：transform-origin（有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);
}

如何将“肯伯恩斯效应”添加到Swiper？

1 个答案: