javascript - Owl Carousel 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>

标签： javascripthtmljqueryowl-carouselowl-carousel-2

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>

并且轮播初始化是这样的：

$(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