javascript - Owl Carousel 2 : Add title, 单击并移动到相应的项目

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