swiper 异形轮播图案例

以下是一个异形轮播图的案例，使用了Swiper库实现：

HTML代码：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" style="background-image:url('image1.jpg')"></div>
    <div class="swiper-slide" style="background-image:url('image2.jpg')"></div>
    <div class="swiper-slide" style="background-image:url('image3.jpg')"></div>
    <div class="swiper-slide" style="background-image:url('image4.jpg')"></div>
    <div class="swiper-slide" style="background-image:url('image5.jpg')"></div>
    <div class="swiper-slide" style="background-image:url('image6.jpg')"></div>
    <div class="swiper-slide" style="background-image:url('image7.jpg')"></div>
    <div class="swiper-slide" style="background-image:url('image8.jpg')"></div>
  </div>
  <div class="swiper-pagination"></div>
</div>

CSS代码：

.swiper-container {
  width: 100%;
  height: 500px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.swiper-slide {
  width: 50%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s ease-in-out;
}

.swiper-slide:nth-child(1) {
  transform: translateX(0);
}

.swiper-slide:nth-child(2) {
  transform: translateX(50%);
}

.swiper-slide:nth-child(3) {
  transform: translateX(100%);
}

.swiper-slide:nth-child(4) {
  transform: translateX(150%);
}

.swiper-slide:nth-child(5) {
  transform: translateX(200%);
}

.swiper-slide:nth-child(6) {
  transform: translateX(250%);
}

.swiper-slide:nth-child(7) {
  transform: translateX(300%);
}

.swiper-slide:nth-child(8) {
  transform: translateX(350%);
}

.swiper-pagination {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 10px;
  cursor: pointer;
}

.swiper-pagination-bullet-active {
  background-color: #fff;
}

JavaScript代码：

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 'auto',
  centeredSlides: true,
  spaceBetween: 30,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  on: {
    slideChangeTransitionEnd: function() {
      var activeIndex = this.activeIndex;
      var slidesLength = this.slides.length;
      var halfSlidesLength = Math.floor(slidesLength / 2);
      var halfIndex = activeIndex % halfSlidesLength;
      var translateX = halfIndex * 50;
      var slides = this.slides;

      for (var i = 0; i < slidesLength; i++) {
        var slide = slides[i];
        var slideIndex = slide.getAttribute('data-swiper-slide-index');
        var halfSlideIndex = slideIndex % halfSlidesLength;
        var zIndex = halfSlidesLength - Math.abs(halfIndex - halfSlideIndex);

        slide.style.transform = 'translateX(' + (50 * (slideIndex - activeIndex)) + '%) scale(' + zIndex / halfSlidesLength + ')';
        slide.style.zIndex = zIndex;
      }
    },
  },
});

以上代码实现了一个基于Swiper的异形轮播图，通过CSS设置每个轮播项的位置以及过渡效果，通过JavaScript实现了轮播项的缩放和层叠效果。同时，通过Swiper的API实现了轮播图的自动轮播和分页器。