如何创建用文本替代垂直缩略图的Owl Carousel轮播组件

算力阿峰

2026-5-29

实现带侧边垂直新闻板块的同步Owl Carousel轮播

我来帮你把想要的侧边垂直新闻板块+主轮播的效果实现出来，咱们基于你现有的代码一步步调整：

1. 调整HTML结构

首先给页面加一个整体容器，把主轮播和侧边垂直轮播放在一起，同时给每个轮播项补充对应的文本内容——主轮播加详细文本展示区，侧边轮播用文本框替代数字，模拟新闻标题：

<!DOCTYPE html>
<html>
<head>
  <title>垂直侧边栏同步轮播</title>
  <!-- 引入Owl Carousel的依赖资源 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
</head>
<body>
  <!-- 整体容器，实现左右布局 -->
  <div class="carousel-container">
    <!-- 主轮播区域 -->
    <div class="owl-carousel owl-theme" id="sync1">
      <div class="item">
        <h1>轮播内容1</h1>
        <div class="carousel-text">
          这是第一张轮播的详细文本内容，用来展示对应板块的具体信息，支持多行文本自定义样式。
        </div>
      </div>
      <div class="item">
        <h1>轮播内容2</h1>
        <div class="carousel-text">
          第二张轮播的详细描述，你可以在这里添加产品介绍、活动说明等各类内容。
        </div>
      </div>
      <div class="item">
        <h1>轮播内容3</h1>
        <div class="carousel-text">
          第三张轮播的详细信息，配合主标题传递更完整的内容信息给用户。
        </div>
      </div>
      <div class="item">
        <h1>轮播内容4</h1>
        <div class="carousel-text">
          第四张轮播的详细介绍，满足不同场景下的内容展示需求。
        </div>
      </div>
    </div>

    <!-- 侧边垂直新闻轮播区域 -->
    <div class="owl-carousel owl-theme" id="sync2">
      <div class="item">
        <div class="news-box">
          <h3>新闻标题1</h3>
          <p>简短的新闻摘要，吸引用户点击查看详情内容</p>
        </div>
      </div>
      <div class="item">
        <div class="news-box">
          <h3>新闻标题2</h3>
          <p>第二条新闻的简短描述，快速传递核心信息</p>
        </div>
      </div>
      <div class="item">
        <div class="news-box">
          <h3>新闻标题3</h3>
          <p>第三条新闻的摘要信息，简洁明了不拖沓</p>
        </div>
      </div>
      <div class="item">
        <div class="news-box">
          <h3>新闻标题4</h3>
          <p>第四条新闻的简短介绍，保持内容一致性</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

2. 修改CSS实现垂直侧边栏布局

调整CSS，把侧边轮播改成垂直排列，设置左右布局，同时美化新闻文本框和主轮播的文本区域：

/* 整体容器，弹性布局实现左右排列 */
.carousel-container {
  display: flex;
  gap: 20px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 主轮播区域占比 */
#sync1 {
  flex: 1;
  .item {
    background: #0c83e7;
    padding: 80px 40px;
    margin: 5px;
    color: #FFF;
    border-radius: 3px;
    text-align: left;
    .carousel-text {
      margin-top: 20px;
      font-size: 16px;
      line-height: 1.6;
      opacity: 0.9;
    }
  }
}

/* 侧边垂直轮播区域 */
#sync2 {
  width: 300px;
  .item {
    margin: 5px 0;
    border-radius: 3px;
    cursor: pointer;
    .news-box {
      background: #f0f0f0;
      padding: 15px;
      color: #333;
      transition: all 0.3s ease;
      h3 {
        margin: 0 0 8px;
        font-size: 18px;
        color: #0c83e7;
      }
      p {
        margin: 0;
        font-size: 14px;
        line-height: 1.4;
      }
    }
  }
  /* 激活项样式 */
  .current .news-box {
    background: #0c83e7;
    color: #FFF;
    h3 {
      color: #FFF;
    }
  }
}

/* 主轮播的箭头样式 */
.owl-theme {
  .owl-nav {
    [class*='owl-'] {
      transition: all .3s ease;
      &.disabled:hover {
        background-color: #D6D6D6;
      }
    }
  }
}

#sync1.owl-theme {
  position: relative;
  .owl-next, .owl-prev {
    width: 22px;
    height: 40px;
    margin-top: -20px;
    position: absolute;
    top: 50%;
    background: rgba(255,255,255,0.8) !important;
  }
  .owl-prev {
    left: 10px;
  }
  .owl-next {
    right: 10px;
  }
}

/* 垂直轮播的箭头调整 */
#sync2.owl-theme {
  .owl-nav {
    position: relative;
    .owl-prev {
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
    }
    .owl-next {
      position: absolute;
      bottom: -30px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}

3. 调整JS配置实现垂直同步

最后修改JavaScript，给侧边轮播添加vertical: true属性，调整同步逻辑和显示数量：

$(document).ready(function() {
  var sync1 = $("#sync1");
  var sync2 = $("#sync2");
  var slidesPerPage = 2; // 垂直轮播每页显示2个新闻项
  var syncedSecondary = true;

  sync1.owlCarousel({
    items: 1,
    slideSpeed: 2000,
    nav: true,
    autoplay: true,
    dots: true,
    loop: true,
    responsiveRefreshRate: 200,
    navText: ['<svg width="100%" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>', '<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
  }).on('changed.owl.carousel', syncPosition);

  sync2.on('initialized.owl.carousel', function() {
    sync2.find(".owl-item").eq(0).addClass("current");
  }).owlCarousel({
    items: slidesPerPage,
    dots: false,
    nav: true,
    smartSpeed: 200,
    slideSpeed: 500,
    slideBy: slidesPerPage,
    vertical: true, // 开启垂直轮播模式
    responsiveRefreshRate: 100,
    navText: ['↑', '↓'] // 垂直轮播的箭头文本
  }).on('changed.owl.carousel', syncPosition2);

  function syncPosition(el) {
    var count = el.item.count - 1;
    var current = Math.round(el.item.index - (el.item.count / 2) - .5);
    if (current < 0) {
      current = count;
    }
    if (current > count) {
      current = 0;
    }
    sync2.find(".owl-item").removeClass("current").eq(current).addClass("current");
    var onscreen = sync2.find('.owl-item.active').length - 1;
    var start = sync2.find('.owl-item.active').first().index();
    var end = sync2.find('.owl-item.active').last().index();

    if (current > end) {
      sync2.data('owl.carousel').to(current, 100, true);
    }
    if (current < start) {
      sync2.data('owl.carousel').to(current - onscreen, 100, true);
    }
  }

  function syncPosition2(el) {
    if (syncedSecondary) {
      var number = el.item.index;
      sync1.data('owl.carousel').to(number, 100, true);
    }
  }

  sync2.on("click", ".owl-item", function(e) {
    e.preventDefault();
    var number = $(this).index();
    sync1.data('owl.carousel').to(number, 300, true);
  });
});

关键改动说明：

HTML部分：添加整体容器实现左右布局，给主轮播补充文本展示区，侧边轮播替换为新闻文本框
CSS部分：用Flex布局实现主轮播与侧边栏的左右排列，设置侧边栏固定宽度，美化新闻框及激活态样式
JS部分：给侧边轮播开启vertical: true垂直模式，调整每页显示数量，优化同步逻辑确保两个轮播联动正常

这样就能实现你想要的主轮播+侧边垂直新闻板块的同步效果，点击侧边的新闻项可以切换主轮播内容，主轮播切换时侧边也会同步高亮对应的新闻项~

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

如何创建用文本替代垂直缩略图的Owl Carousel轮播组件

1. 调整HTML结构 #

2. 修改CSS实现垂直侧边栏布局 #

3. 调整JS配置实现垂直同步 #

关键改动说明： #

1. 调整HTML结构

2. 修改CSS实现垂直侧边栏布局

3. 调整JS配置实现垂直同步

关键改动说明：