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:
JavaScript
x
8
1
owl.on('changed.owl.carousel', function() {
2
3
activeEls = $('.owl-item.active');
4
5
setCarouselCaption( activeEls[1] );
6
7
});
8
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.
JavaScript
1
21
21
1
$(document).ready(function(){
2
var owl = $('.owl-carousel').owlCarousel({
3
loop:true,
4
margin:10,
5
nav:true,
6
items:3
7
});
8
9
owl.on('changed.owl.carousel', function(event) {
10
setTimeout(function(){
11
var activeEls = $('.owl-item.active').eq(1); // .eq(1) to get the "middle image out of 3 actives"
12
setCarouselCaption( activeEls );
13
},1);
14
});
15
16
function setCarouselCaption(el){
17
$(".owl-item").removeClass("target");
18
el.addClass("target");
19
}
20
21
}); // Ready
JavaScript
1
3
1
.target{
2
border-bottom:1px solid red;
3
}
JavaScript
1
19
19
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
3
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>
4
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet"/>
5
6
<div class="owl-carousel owl-theme">
7
<div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+1"></h4></div>
8
<div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+2"></h4></div>
9
<div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+3"></h4></div>
10
<div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+4"></h4></div>
11
<div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+5"></h4></div>
12
<div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+6"></h4></div>
13
<div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+7"></h4></div>
14
<div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+8"></h4></div>
15
<div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+9"></h4></div>
16
<div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+10"></h4></div>
17
<div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+11"></h4></div>
18
<div class="item"><h4><img src="http://via.placeholder.com/350x150/?text=image+12"></h4></div>
19
</div>