Owl 轮播 2：添加标题，单击并相应地移动到项目

Question

我正在使用 Owl Carousel 2，居中。如图所示，我需要一些帮助。基本上我有 6 件商品，其中 2 件属于同一类别

标题 1：1 和 1a
标题 2：2 和 2a
标题 3：3 和 3a

点击“Title 1”会移动到1，但不是1a，点击“Title 2”会移动到2，依此类推

希望你们中的一些人能给我一些建议。谢谢！

$(document).ready(function($) {
    $('.loop').owlCarousel({
      center: true,
      items: 2,
      loop: true,
      margin: 10,
      nav: true,
      responsive: {
        600: {
          items: 5
        }
      }
    });
 });

h4{
    border: 1px solid black;
    text-align: center;
}

<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<a href="#" class="title1">Title 1</a>
<a href="#" class="title2">TItle 2</a>
<a href="#" class="title3">TItle 3</a>
<div class="loop owl-carousel owl-theme">
  <div class="item">
    <h4>1</h4>
  </div>
  <div class="item">
    <h4>1a</h4>
  </div>
  <div class="item">
    <h4>2</h4>
  </div>
  <div class="item">
    <h4>2a</h4>
  </div>
  <div class="item">
    <h4>3a</h4>
  </div>
  <div class="item">
    <h4>3</h4>
  </div>
</div>

Answer 1

以这种方式更改轮播中的项目代码：

<div class="loop owl-carousel owl-theme">
  <div class="item" data-hash="one">
    <h4>1</h4>
  </div>
  <div class="item">
    <h4>1a</h4>
  </div>
  <div class="item" data-hash="two">
    <h4>2</h4>
  </div>
  <div class="item">
    <h4>2a</h4>
  </div>
  <div class="item">
    <h4>3a</h4>
  </div>
  <div class="item" data-hash="three">
    <h4>3</h4>
  </div>
</div>

标题变化如下：

<a href="#one" class="title1">Title 1</a>
<a href="#two" class="title2">TItle 2</a>
<a href="#three" class="title3">TItle 3</a>

而Carousel的初始化是这样的：

$(document).ready(function($) {
    $('.loop').owlCarousel({
      center: true,
      items: 2,
      loop: true,
      margin: 10,
      nav: true,
      URLhashListener: true, //1. this string added
      startPosition: 'URLHash', //2. this string added
      responsive: {
        600: {
          items: 5
        }
      }
    });
 });

更多细节见官方文档：https://owlcarousel2.github.io/OwlCarousel2/demos/urlhashnav

Owl 轮播 2：添加标题，单击并相应地移动到项目

Owl Carousel 2: Add title, click and move to item accordingly

html

javascript

jquery

owl-carousel

owl-carousel-2