swiper 中点击active的轮播图

如果你想在 swiper 中点击 active 的轮播图，可以使用 Swiper 的回调函数 onSlideChangeEnd，例如：

var mySwiper = new Swiper('.swiper-container', {
  onSlideChangeEnd: function () {
    var activeIndex = mySwiper.activeIndex;
    var activeSlide = mySwiper.slides[activeIndex];
    // 在这里处理点击 active 轮播图的逻辑
  }
});

在 onSlideChangeEnd 回调函数中，可以获取当前 active 的索引和对应的 slide 元素，然后在里面处理点击事件的逻辑。

相关问题

swiper 6实现堆叠轮播图

Swiper是一个流行的JavaScript库，用于创建响应式的触摸滑动幻灯片或轮播图。在Swiper v6版本中，实现堆叠式轮播图通常涉及到以下几个步骤：

1. **引入库**：首先需要在HTML中引入Swiper的CSS和JS文件：

   <link rel="stylesheet" href="swiper.min.css">
   <script src="swiper.min.js"></script>

2. **初始化Swiper实例**：在需要堆叠的容器上添加一个`swiper`的ID，并配置堆叠模式：

   var swiper = new Swiper('.swiper-container', {
     // 堆叠模式：horizontal 或 vertical，这取决于你想要水平还是垂直堆叠
     spaceBetween: 0,
     // 如果有多层堆叠，可以设置stackEffect，如'Stack'（默认），'Fade'等
     stackEffect: 'Stack',
     // 堆叠项之间是否可见，默认是true，若设置为false则隐藏堆叠项之间的间隙
     observeParents: true,
   });

3. **样式设置**：你可以通过CSS进一步定制堆叠项的样式、间隔等：

   .swiper-slide {
     /* 样式 */
   }
   .swiper-pagination-bullet-active {
     /* 鼠标悬停时或当前选中的指示器样式 */
   }

4. **事件监听**：为了响应用户交互或控制轮播，可以在Swiper实例上添加事件处理程序：

   swiper.on('slideChangeEnd', function() {
     // 某些操作在切换到新一排后触发
   });

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实现了轮播图的自动轮播和分页器。