Is there a way to display the caption div only when the current item is focused? I am currently able to show the caption, but I am facing an issue where in a loop cycle, when the second last image is focused, the last image also shows the caption.
During the first loop, all caption divs are displayed when an image is focused. However, after the first loop, the last image already has the caption displayed. This issue occurs when the carousel option is set to loop: true. When set as false and I navigate using previous and next buttons, the problem does not occur. You can find my code for reference here: http://jsfiddle.net/ROHIT502/1qdurrLz/95/ Here is the jQuery code snippet:
$(document).ready(function () {
$('#slider').on('initialized.owl.carousel change.owl.carousel changed.owl.carousel ', function (e) {
if (!e.namespace || e.type != 'initialized' && e.property.name != 'position') return;
var current = e.relatedTarget.current()
var items = $(this).find('.owl-stage').children()
//alert(current);
var add = e.type == 'changed' || e.type == 'initialized'
items.eq(e.relatedTarget.normalize(current)).toggleClass('current', add)
}).owlCarousel({
items: 3,
margin: 10,
itemsDesktop : [1199,3],
itemsDesktopSmall: [979, 3],
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause: true,
//autoHeight: true,
responsive: true,
center: true,
dots:false,
nav: true,
loop: true
});
})