Owlcarousel2: jQuery Owl Carousel animation for items value 2

[Dipak-Chandran]

When I am trying to use owl carousel's animate In and out feature and am showing 2 items, the transition animation is not working.

This is the configuration I am trying: (items:2)

$('[shoppable-image-container]').owlCarousel({
loop:true,
nav: true,
navText: ["<a><span></span></a>","<a><span></span></a>"],
lazyLoad : true,
dots: true,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items:2,
margin:10 ,
autoplay:true,
// autoplayTimeout:4000,
smartSpeed:2000
});
with the following configuration animation it is working fine:(items:1)

$('[shoppable-image-container]').owlCarousel({
loop:true,
nav: true,
navText: ["<a><span></span></a>","<a><span></span></a>"],
lazyLoad : true,
dots: true,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items:1,
margin:10 ,
autoplay:true,
// autoplayTimeout:4000,
smartSpeed:2000
});
How can I achieve multiple items (specifically 2 items) animation together using owl Carousel? Is this possible with owl carousel?

Thanks.

[iandonovan]

Please use stack overflow for these sorts of support requests.

[zagabona]

It has been asked here and here, but no one seems to be able to answer this question.

Are you sure this is not a bug?

[hardenrahul]

//try this

$('.loop-test').owlCarousel({
     loop: true,
    items: 2,
    nav: true
});
$('.loop-test').on('translate.owl.carousel', function(event) {
    $(this).find(".item").hide();
});

 $('.loop-test').on('translated.owl.carousel', function(event) {
$(this).find(".item").fadeIn(800);
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.green.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>


<div class="owl-carousel owl-theme loop-test">
   <div class="item"> Your Content </div>
   <div class="item"> Your Content </div>
   <div class="item"> Your Content </div>
   <div class="item"> Your Content </div>
   <div class="item"> Your Content </div>
   <div class="item"> Your Content </div>
   <div class="item"> Your Content </div>
</div>