Owl Carousel 大图，小图联动轮播例子

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

HTML 代码：

<div class="owl-carousel owl-theme">
  <div class="item">
    <img src="big-image-1.jpg" alt="Big Image 1">
  </div>
  <div class="item">
    <img src="big-image-2.jpg" alt="Big Image 2">
  </div>
  <div class="item">
    <img src="big-image-3.jpg" alt="Big Image 3">
  </div>
</div>

<div class="owl-carousel owl-theme thumbs">
  <div class="item">
    <img src="small-image-1.jpg" alt="Small Image 1">
  </div>
  <div class="item">
    <img src="small-image-2.jpg" alt="Small Image 2">
  </div>
  <div class="item">
    <img src="small-image-3.jpg" alt="Small Image 3">
  </div>
</div>

CSS 代码：

.owl-carousel {
  margin-bottom: 20px;
}

.thumbs .item {
  margin-right: 10px;
}

.thumbs .item:last-child {
  margin-right: 0;
}

.thumbs .item img {
  width: 100%;
  height: auto;
  cursor: pointer;
  opacity: 0.5;
}

.thumbs .item.active img {
  opacity: 1;
}

JavaScript 代码：

$(document).ready(function() {
  var bigCarousel = $('.owl-carousel');
  var thumbsCarousel = $('.thumbs');

  bigCarousel.owlCarousel({
    items: 1,
    loop: true,
    dots: false,
    nav: true,
    navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>']
  });

  thumbsCarousel.owlCarousel({
    items: 3,
    loop: true,
    dots: false,
    nav: false,
    margin: 10,
    responsive: {
      0: {
        items: 3
      },
      600: {
        items: 4
      },
      1000: {
        items: 5
      }
    }
  });

  thumbsCarousel.on('click', '.item', function(e) {
    e.preventDefault();
    var index = $(this).index();
    bigCarousel.trigger('to.owl.carousel', [index, 300, true]);
    thumbsCarousel.find('.item.active').removeClass('active');
    $(this).addClass('active');
  });

  bigCarousel.on('changed.owl.carousel', function(event) {
    var index = event.item.index;
    thumbsCarousel.find('.item.active').removeClass('active');
    thumbsCarousel.find('.item').eq(index).addClass('active');
  });
});

在上面的例子中，我们使用了两个 Owl Carousel 实例，一个用于显示大图，另一个用于显示小图。我们通过 thumbsCarousel.on('click', '.item', function(e) {}); 和 bigCarousel.on('changed.owl.carousel', function(event) {}); 两个事件来实现大图和小图的联动效果。