Skip to content
Advertisement

Owl Carousel 2 – Getting Active Items

gil

I have an Owl Carousel 2 that’s being generated by a WordPress theme and I’ve set up some custom scripts similar to this:

owl.on('changed.owl.carousel', function() {

    activeEls = $('.owl-item.active');

    setCarouselCaption( activeEls[1] ); 

});

This places the image caption of the middle image below the carousel in a full-width container.

The issue I’m having is, when I assign the active items to activeEls – it’s grabbing the active items BEFORE the click – rather than after.

Is there any way to wait for the Owl Carousel to update the active items and THEN assign those to activeEls?

OR – is there any way to detect whether the Previous or the Next button was clicked? Right now, I’m only able to detect a change but not which change.

Advertisement

Answer

A .setTimeout() as short as 1ms does the trick here.

$(document).ready(function(){
  var owl = $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    items:3
  });
  
  owl.on('changed.owl.carousel', function(event) {
    setTimeout(function(){
      var activeEls = $('.owl-item.active').eq(1); // .eq(1) to get the "middle image out of 3 actives"
      setCarouselCaption( activeEls ); 
    },1);
  });

  function setCarouselCaption(el){
    $(".owl-item").removeClass("target");
    el.addClass("target");
  }

});  // Ready
.target{
  border-bottom:1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet"/>

<div class="owl-carousel owl-theme">
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+1"></h4></div>
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+2"></h4></div>
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+3"></h4></div>
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+4"></h4></div>
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+5"></h4></div>
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+6"></h4></div>
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+7"></h4></div>
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+8"></h4></div>
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+9"></h4></div>
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+10"></h4></div>
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+11"></h4></div>
  <div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+12"></h4></div>
</div>
Advertisement