Search code examples
jqueryowl-carousel-2

Owl Carousel 2 how to display all slide titles on every slide

I am working on a project for a client and he wants to have an Owl Carousel that displays all the slide titles on every slide and they are clickable. enter image description here To be more clear I have added a picture. Does anyone have a clue how to solve this thing.

Here is the closest I got

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

  • You can use each loop then iterate through each item div and get the img title of all images and add them inside your titles div . After that you can highlight the title according to current image shown in slider inside your owl.on('translated.owl.carousel', .. event .

    Demo Code :

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