Как добавить титры для изображений в owl carousel

Question

Я использую собственную карусель, поэтому для добавления заголовка я следовал this question при переполнении стека, но это не сработало для меня. Затем я проверил с помощью элемента проверки и обнаружил, что их класс не активен на текущем изображении карусели. Поэтому я добавил сценарий для этого. В конце мой сценарий выглядит так:

$(document).ready(function() { 
    $('.owl-carousel').owlCarousel({ 
     loop: true, 
     items: 1, 
     afterAction: function(el) { 
      //remove class active 
      this 
       .$owlItems 
       .removeClass('active') 

      //add class active 
      this 
       .$owlItems 
       .eq(this.currentItem) 
       .addClass('active') 
     }, 

     onInitialized: function() { 
      var activeImg = $('.owl-carousel').find('.active').find('img'); 
      var comment = activeImg.attr('alt'); 
      var title = activeImg.attr('title'); 
      if (comment) $('.image-caption').html('<h4>' + title + '</h4><p>' + comment + '</p>'); 
     } 
    }); 

    owl = $('.owl-carousel').owlCarousel(); 
    $('.prev').click(function() { 
     owl.trigger('prev.owl.carousel'); 
    }); 
    $('.next').click(function() { 
     owl.trigger('next.owl.carousel'); 
    }); 

    owl.on('translated.owl.carousel', function(event) { 
     var activeImg = $(this).find('.active').find('img'); 
     var comment = activeImg.attr('alt'); 
     var title = activeImg.attr('title'); 
     if (comment) $('.image-caption').html('<h4>' + title + '</h4><p>' + comment + '</p>'); 
    }); 
}); 

Сценарий работает неправильно.

Answer 1

В этом решении я использую элемент HTML figcaption, который представляет подпись или легенду, связанную с HTML figure.

Также я добавил всю необходимую логику в OWL CarouselafterMove после перемещения обратного вызова:

$('.owl-carousel').owlCarousel({ 
 
    loop: true, 
 
    items: 1, 
 
    navigation: true, 
 
    pagination: true, 
 
    lazyLoad: true, 
 
    singleItem: true, 
 
    afterMove: function(elem) { 
 
     var current = this.currentItem; 
 
     var currentImg = elem.find('.owl-item').eq(current).find('img'); 
 

 
     $('figure') 
 
      .find('img') 
 
      .attr({ 
 
       'src': currentImg.attr('src'), 
 
       'alt': currentImg.attr('alt'), 
 
       'title': currentImg.attr('title') 
 
      }); 
 
     $('#figcaption').text(currentImg.attr('title')); 
 
    } 
 
});

.owl-carousel .owl-item img { 
 
    display: block; 
 
    width:80%; 
 
    height:100px; 
 
}

<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" /> 
 
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" /> 
 
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" /> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script> 
 

 
<figure id="currentImageWithCaption"> 
 
    <img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Title 1" width="50" height="30"> 
 
    <figcaption id="figcaption">Title 1</figcaption> 
 
</figure> 
 

 
<div class="owl-carousel"> 
 
    <div class="item"> 
 
     <img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Alt 1" /> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="https://malsup.github.io/images/p2.jpg" title="Title 2" alt="Alt 2" /> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="https://malsup.github.io/images/p3.jpg" title="Title 3" alt="Alt 3" /> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="https://malsup.github.io/images/p4.jpg" title="Title 4" alt="Alt 4" /> 
 
    </div> 
 
</div>

Answer 2

@YosvelQuintero писал сценарий, но не знаю, почему он удалил. Поэтому я отправляю его снова, если кому-то это нужно.

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" /> 
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" /> 

<figure id="currentImageWithCaption"> 
    <img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Title 1" width="200" height="150"> 
    <figcaption id="figcaption">Title 1</figcaption> 
</figure> 

<div class="owl-carousel"> 
    <div class="item"> 
     <img src="https://malsup.github.io/images/p1.jpg" title="Title 1" alt="Alt 1" /> 
    </div> 
    <div class="item"> 
     <img src="https://malsup.github.io/images/p2.jpg" title="Title 2" alt="Alt 2" /> 
    </div> 
    <div class="item"> 
     <img src="https://malsup.github.io/images/p3.jpg" title="Title 3" alt="Alt 3" /> 
    </div> 
    <div class="item"> 
     <img src="https://malsup.github.io/images/p4.jpg" title="Title 4" alt="Alt 4" /> 
    </div> 
</div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script> 

<style> 
figure img { 
display: block; 
width:100%; 
height: auto; 
} 
.owl-wrapper-outer{ 
    display : none; 
} 
</style> 

<script> 
    $('.owl-carousel').owlCarousel({ 
     loop: true, 
     items: 1, 
     navigation: true, 
     pagination: true, 
     lazyLoad: true, 
     afterMove: function(elem) { 
      var current = this.currentItem; 
      var currentImg = elem.find('.owl-item').eq(current).find('img'); 

      $('figure') 
       .find('img') 
       .attr('src', currentImg.attr('src')) 
       .attr('alt', currentImg.attr('alt')) 
       .attr('title', currentImg.attr('title')); 
      $('#figcaption').text(currentImg.attr('title')); 
     } 
    }); 
</script>