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

Question

I'm using Owl Carousel 2, center. I need help for something as shown on picture. Basically I have 6 items, 2 of them under same category

• Title 1: 1 and 1a
• Title 2: 2 and 2a
• Title 3: 3 and 3a

When click on "Title 1", it will move to 1, but not 1a, click on "Title 2" will move to 2 and so on.

Hoping that some of you could provide me with some advice. Thank you!

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

Change items code in your Carousel in this way:

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

Titles change in this way:

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

And Carousel initialization in this way:

$(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
        }
      }
    });
 });

More details see in oficial docs: https://owlcarousel2.github.io/OwlCarousel2/demos/urlhashnav