Swiper 大图，小图联动轮播例子

下面是一个使用 Swiper 实现大图和小图联动轮播的例子，你可以根据自己的需求进行修改和定制：

HTML 代码：

<div class="swiper-container big-swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="big-image-1.jpg" alt="Big Image 1">
    </div>
    <div class="swiper-slide">
      <img src="big-image-2.jpg" alt="Big Image 2">
    </div>
    <div class="swiper-slide">
      <img src="big-image-3.jpg" alt="Big Image 3">
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

<div class="swiper-container small-swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="small-image-1.jpg" alt="Small Image 1">
    </div>
    <div class="swiper-slide">
      <img src="small-image-2.jpg" alt="Small Image 2">
    </div>
    <div class="swiper-slide">
      <img src="small-image-3.jpg" alt="Small Image 3">
    </div>
  </div>
</div>

CSS 代码：

.swiper-slide img {
  width: 100%;
  height: auto;
}

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

.big-swiper {
  position: relative;
}

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

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}

.swiper-button-prev {
  left: 10px;
}

.swiper-button-next {
  right: 10px;
}

.small-swiper {
  margin-top: 10px;
}

.small-swiper .swiper-slide {
  width: 100px;
  height: 60px;
  margin-right: 10px;
}

.small-swiper .swiper-slide:last-child {
  margin-right: 0;
}

.small-swiper img {
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0.5;
}

.small-swiper .swiper-slide-active img {
  opacity: 1;
}

JavaScript 代码：

var bigSwiper = new Swiper('.big-swiper', {
  loop: true,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  }
});

var smallSwiper = new Swiper('.small-swiper', {
  slidesPerView: 3,
  spaceBetween: 10,
  freeMode: true,
  watchSlidesVisibility: true,
  watchSlidesProgress: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  }
});

bigSwiper.controller.control = smallSwiper;
smallSwiper.controller.control = bigSwiper;

smallSwiper.on('click', function() {
  bigSwiper.slideTo(smallSwiper.clickedIndex);
});

在上面的例子中，我们使用了两个 Swiper 实例，一个用于显示大图，另一个用于显示小图。我们通过 bigSwiper.controller.control = smallSwiper; 和 smallSwiper.controller.control = bigSwiper; 来实现大图和小图的联动效果。在小图中点击某一张图片时，我们通过 smallSwiper.on('click', function() {}); 来跳转到对应的大图。