Owl Carousel 2 如何在每张幻灯片上显示所有幻灯片标题

Question

我正在为客户做一个项目，他想要一个 Owl Carousel，在每张幻灯片上显示所有幻灯片标题，并且它们是可点击的。 为了更清楚，我添加了一张图片。有没有人知道如何解决这个问题。

这是我得到的最近的

 var owl = $('.owl-carousel');
 owl.owlCarousel({
 loop: true,
 autoplay: true,
 items: 1,
 });

 owl.on('translated.owl.carousel', function(event) {
 var title = $(this).find('.active').find('img').attr('title');
 if(title) $('.titles').html(title);
 });

 <div class="titles">Slide Title</div>
 <div class="owl-carousel">
 <div class="item">
 <img src="https://loremflickr.com/1920/1080/soccer" title="Slide Title 1" alt="Alt 1" />
 </div>
 <div class="item">
 <img src="https://loremflickr.com/1920/1080/cars" title="Slide Title 2" alt="Alt 2" />
 </div>
 <div class="item">
 <img src="https://loremflickr.com/1920/1080/travel" title="Slide Title 3" alt="Alt 3" />
 </div>
 <div class="item">
 <img src="https://loremflickr.com/1920/1080/handball" title="Slide Title 4" alt="Alt 4" />
 </div>
 </div>

Answer 1

您可以使用 each 循环，然后遍历每个 item div 并获取所有图像的 img 标题并将它们添加到您的 titles div 中。之后，您可以根据 owl.on('translated.owl.carousel', .. 事件内滑块中显示的当前图像突出显示标题。

演示代码：

$(document).ready(function() {
  //show all title in one place..
  $(".item").each(function(i) {
    //you can manipulate..this html generated according to your need...
    //add `<a>` if needed
    $(".titles ul").append(`<li data-index="${i}">${$(this).find("img").attr("title")}</li>`)
  })
  $(".titles ul li:first").addClass("active");
  var owl = $('.owl-carousel');
  owl.owlCarousel({
    loop: true,
    autoplay: true,
    items: 1,
  });

  owl.on('translated.owl.carousel', function(event) {
    //get data-index..
    var index_ = $(this).find('.active').find("img").data("index")
    $(".titles li").removeClass("active")
    //for making active
    $("li[data-index=" + index_ + "]").addClass("active");

  });
})

.titles ul li {
  border: 1px solid black;
  display: inline-block;
  height: 25px;
  list-style-type: none;
  text-align: center;
  padding: 5px;
  width: 100px;
}

.active {
  background: yellow;
}

img {
  height: 300px;
  width: 60px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css">
<div class="titles">
  <ul></ul>
</div>
<div class="owl-carousel">
  <!--added data-index-->
  <div class="item">
    <img src="https://loremflickr.com/1920/1080/soccer" data-index="0" title="Slide Title 1" alt="Alt 1" />
  </div>
  <div class="item">
    <img src="https://loremflickr.com/1920/1080/cars" title="Slide Title 2" data-index="1" alt="Alt 2" />
  </div>
  <div class="item">
    <img src="https://loremflickr.com/1920/1080/travel" title="Slide Title 3" data-index="2" alt="Alt 3" />
  </div>
  <div class="item">
    <img src="https://loremflickr.com/1920/1080/handball" title="Slide Title 4" data-index="3" alt="Alt 4" />
  </div>
</div>