基于Owl Carousel实现带缩略图预览的自定义导航轮播

要实现你要的效果，Owl Carousel没有直接的现成配置，但可以通过两个独立的Owl轮播实例联动来完成，下面是具体实现步骤：

1. HTML结构 #

先搭建主轮播（展示大图）和缩略图轮播（底部预览）的基础结构：

<!-- 主轮播容器 -->
<div class="main-carousel owl-carousel">
  <div class="item"><img src="img1.jpg" alt="大图1"></div>
  <div class="item"><img src="img2.jpg" alt="大图2"></div>
  <div class="item"><img src="img3.jpg" alt="大图3"></div>
  <div class="item"><img src="img4.jpg" alt="大图4"></div>
</div>

<!-- 缩略图轮播容器 -->
<div class="thumb-carousel owl-carousel">
  <div class="item"><img src="thumb1.jpg" alt="缩略图1"></div>
  <div class="item"><img src="thumb2.jpg" alt="缩略图2"></div>
  <div class="item"><img src="thumb3.jpg" alt="缩略图3"></div>
  <div class="item"><img src="thumb4.jpg" alt="缩略图4"></div>
</div>

2. 初始化轮播并实现联动 #

引入Owl Carousel的JS和CSS后，初始化两个轮播，通过事件监听实现两者同步：

$(document).ready(function(){
  // 初始化主轮播
  var mainCarousel = $('.main-carousel').owlCarousel({
    items: 1, // 只显示1张大图
    center: true, // 居中显示大图
    nav: true, // 显示两侧导航箭头
    navText: ['<span>←</span>', '<span>→</span>'], // 自定义箭头内容
    dots: false, // 隐藏默认圆点指示器
    loop: true // 开启循环轮播
  });

  // 初始化缩略图轮播
  var thumbCarousel = $('.thumb-carousel').owlCarousel({
    items: 4, // 同时显示4张缩略图
    margin: 10, // 缩略图间距
    nav: false, // 隐藏缩略图的导航按钮
    dots: false,
    loop: true
  });

  // 主轮播切换时，同步缩略图轮播的位置
  mainCarousel.on('changed.owl.carousel', function(event) {
    var currentIndex = event.item.index;
    thumbCarousel.trigger('to.owl.carousel', [currentIndex, 300, true]);
    // 给当前选中的缩略图添加高亮样式
    $('.thumb-carousel .item').removeClass('active');
    $('.thumb-carousel .item').eq(currentIndex).addClass('active');
  });

  // 点击缩略图时，切换主轮播到对应图片
  $('.thumb-carousel .item').click(function(){
    var targetIndex = $(this).index();
    mainCarousel.trigger('to.owl.carousel', [targetIndex, 300, true]);
  });
});

3. 自定义CSS样式 #

调整样式实现大图居中、箭头位置、缩略图选中效果：

/* 主轮播样式 */
.main-carousel {
  max-width: 800px;
  margin: 0 auto 20px;
  position: relative;
}
.main-carousel .item img {
  width: 100%;
  height: auto;
  display: block;
}
/* 自定义导航箭头位置与样式 */
.owl-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  left: 0;
}
.owl-prev, .owl-next {
  position: absolute;
  background: rgba(0,0,0,0.5) !important;
  color: white !important;
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.owl-prev { left: -20px; }
.owl-next { right: -20px; }

/* 缩略图轮播样式 */
.thumb-carousel {
  max-width: 800px;
  margin: 0 auto;
}
.thumb-carousel .item img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  opacity: 0.6;
  transition: opacity 0.3s;
}
.thumb-carousel .item.active img {
  opacity: 1;
  border: 2px solid #000;
}

关键说明 #

• 主轮播通过items:1和center:true保证只显示一张居中的大图
• 利用changed.owl.carousel事件监听主轮播切换，同步缩略图的位置
• 缩略图点击时触发主轮播的to.owl.carousel方法，跳转到对应索引的图片
• 通过CSS自定义箭头位置、样式，以及缩略图的选中高亮效果

内容的提问来源于stack exchange，提问作者hawa saki