I am having trouble animating my captions in owl carousel 2. This is what I have so far:
$(document).ready(function() {
$("#slider").owlCarousel({
margin:0,
autoplay : true,
lazyLoad : true,
items : 1,
autoHeight : true,
animateOut: 'fadeOut',
dotsContainer: '#customDots',
});
$(".owl-item.active h2").addClass('animated');
$(".owl-item.active h3").addClass('animated');
$(".next").click(function(){
$("#slider").trigger('owl.next');
});
$(".prev").click(function(){
$("#slider").trigger('owl.prev');
});
$('.owl-dot').click(function () {
$("#slider").trigger('to.owl.carousel', [$(this).attr('goto'), 500]);
});
$("#slider").on('change.owl.carousel', function(event) {
$(".owl-item h2").removeClass('animated');
$(".owl-item h3").removeClass('animated');
});
$("#slider").on('translate.owl.carousel', function(event) {
$(".owl-item.active h2").addClass('animated');
$(".owl-item.active h3").addClass('animated');
});
$('#customDots').css('top', $('#slider').height()-200+"px");
});/*Top Section Design: Carousel*/
#slider{
z-index:-5;
}
.owl-item {
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
}
#slider .owl-item img{
display: block;
width: 100%;
height: auto;
}
#slider .owl-item:before{
content:"";
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.35);
}
#customDots{
width: 100%;
position: absolute;
top: 50vh;
display: inline-block;
text-align: center;
color: gray;
}
#customDots .owl-dot.active{
color: white!important;
}
.customNavigation{
position: relative;
top: 0;
width: 100%;
height: 100vh;
color: white;
z-index: -1;
}
.slide-caption {
position: absolute;
top: 50%;
left: 0;
text-align: center;
width: 100%;
height: 100%;
margin-top: -120px;
z-index: 0;
}
.slide-caption h2{
color: #fff;
font-size: 60px;
font-weight: 800;
line-height: 60px;
text-transform: uppercase;
}
.slide-caption h2 span{
color: black;
}
.slide-caption h3{
color: #fff;
font-size: 20px;
font-weight: 400;
line-height: 30px;
margin-bottom: 30px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider" class="owl-carousel">
<div>
<img src="assets/landing-carousel/11.jpg">
<div class="slide-caption">
<h2 class="bounceInLeft">Something <span>important</span> here</h2>
<h3 class="bounceInRight">Lorem ipsum dolor sit amet consecte tur adipiscing<br> titor diam, a accumsan justo laoreet</h3>
</div>
</div>
<div>
<img src="assets/landing-carousel/06.jpg">
<div class="slide-caption">
<h2 class="bounceInRight">Doesn't this <span>design</span> look nice?</h2>
<h3 class="bounceInRight">Lorem ipsum dolor sit amet consecte tur adipiscing<br> titor diam, a accumsan justo laoreet</h3>
</div>
</div>
<div>
<img src="assets/landing-carousel/05.jpg">
<div class="slide-caption">
<h2 class="bounceInRight">An <span>extraordinary</span> experience</h2>
<h3 class="bounceInRight">Lorem ipsum dolor sit amet consecte tur adipiscing<br> titor diam, a accumsan justo laoreet</h3>
</div>
</div>
</div>I am trying to make is so that when a new slide appears it adds the class animated to the current slide so that the animation appear. And removes it from all the others so that when it comes back to the prevous slide it can animate again.
It seems to be working for the landing slide the first time it load. Then it stops working the next time to comes back to it.
Let me know what I am doing wrong.
