My Owl-carousel slides are disappearing after resizing the browser window. You can see the issue in action here: . The website where this problem occurs is: . I suspect it has to do with the CSS animation within the items, as disabling the fade animation resolves the issue. Any assistance in resolving this matter would be greatly appreciated. Thanks.
<script>
<!-- //Start Hero slider control panel
var owl = $('.owl-carousel').owlCarousel({
animateOut: 'fadeOut',
animateIn: 'fadeIn',
autoplayTimeout: 2000,
autoplayHoverPause: true,
loop: true,
margin: 0,
nav: false,
mouseDrag:true,
touchDrag:true,
pullDrag:false,
freeDrag:false,
dots:false,
autoplay: true,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
});
// End Hero slider control panel
// Start Reactivate css animation every time a slide is loaded
owl.on('change.owl.carousel', function (event) {
var el = event.target;
$('h1', el).addClass('fadeInUp animated')
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$('h1', el).removeClass('fadeInUp animated');
});
$('.anim1', el).addClass('fadeInUp animated')
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$('.anim1', el).removeClass('fadeInUp animated');
});
});
// Start Reactivate css animation every time a slide is loaded
</script>/*Start hero slider*/
.owl-carousel .owl-item {
-webkit-animation-duration: .7s !important;
animation-duration: .7s !important;
}
.padding_zero {overflow:hidden; padding:0; margin-top:-35px; border-top:solid 2px #f8f9fa;}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:100%;
}
.fadeInUp {
animation-duration: 1s;
animation-delay: .1s;
}<!-- Start Hero slider -->
<div class="container-fluid padding_zero">
<div class="row justify-content-center ">
<div class="col-12 col-md-12 ">
<div class="owl-carousel owl-theme">
<div class="item " >
<img src="images/girl2.jpg" alt="" >
<div class="centered p-3 text-right col-12 item1"><h1 class="fadeInUp mr-2" >Lorem1 ipsum dolor sit..</h1>
<p class="fadeInUp anim1 mr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a href="index.php" class="btn btn-default d-md-inline-block px-3 pt-1 mr-2 fadeInUp anim1" ><b>START PROIECT </b> <i class="fas fa-caret-right fa-lg "></i></a>
</div>
</div>
<div class="item ">
<img src="images/office2.jpeg" alt="" >
<div class="centered p-3 text-black text-center col-12 col-md-6 item2"><h1>Lorem2 ipsum dolor.</h1>
<p class="anim1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias alias assumenda impedit cumque beatae quas earum soluta omnis.</p>
<a href="index.php" class="btn btn-default px-3 pt-1 anim1 d-md-inline-block "><b>CONTACT</b></a>
</div>
</div>
<div class="item ">
<img src="images/forest1.jpg" alt="" >
<div class="centered p-3 text-white text-center col-12 col-md-6 item3"><h1>Lorem3 ipsum dolor.</h1>
<p class="anim1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora obcaecati, recusandae porro.</p>
<a href="index.php" class="btn btn-default px-3 pt-1 d-md-inline-block anim1"><b>DETALII</b></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Hero Slider -->