I'm using owlCarousel library in my popular-travel section, and to make the item (image) more interactive. I use scrollReveal.js to animate when the section appears in the viewport. Everything works fine, but my last item (4th image) in my popular section doesn't appears (by default, only 3 image you can see in popular section, you have too drag left to see the fourth image, like usual carousel). The last item/image showing up only when I zoom out the page to 90%. When i reload the page in 90% viewport, all item appears well.
This is my owlCarousel item
<div id="owl-two" class="mb-20 flex owl-carousel">
<div class="item first relative flex-shrink-0" style="width: 375px; height: 440px;">
<img class="absolute inset-0 w-full h-auto" src="public/img/popular/popular-1.png" alt="Tangkuban">
<div class="absolute inset-0 bg-gradient-to-t from-gray-800 via-transparent"></div>
<div class="absolute text-3xl text-white left-10 bottom-10">Tangkuban Lake</div>
</div>
<div class="item second relative flex-shrink-0" style="width: 375px; height: 440px;">
<img class="absolute inset-0 w-full h-auto" src="public/img/popular/popular-2.png" alt="Tangkuban">
<div class="absolute inset-0 w-full h-full bg-gradient-to-t from-gray-800 via-transparent"></div>
<div class="absolute text-3xl text-white left-10 bottom-10">Purwo Forest</div>
</div>
<div class="item third relative flex-shrink-0" style="width: 375px; height: 440px;">
<img class="absolute inset-0 w-full h-auto" src="public/img/popular/popular-3.png" alt="Tangkuban">
<div class="absolute inset-0 w-full h-full bg-gradient-to-t from-gray-800 via-transparent"></div>
<div class="absolute text-3xl text-white left-10 bottom-10">Javanica Island</div>
</div>
<div class="item fourth relative flex-shrink-0" style="width: 375px; height: 440px;">
<img class="absolute inset-0 w-full h-auto" src="public/img/popular/popular-4.png" alt="Tangkuban">
<div class="absolute inset-0 w-full h-full bg-gradient-to-t from-gray-800 via-transparent"></div>
<div class="absolute text-3xl text-white left-10 bottom-10">Kolbano Beach</div>
</div>
</div>
This is my owlCarousel config
let owl2 = $("#owl-two");
owl2.owlCarousel({
autoWidth: true,
dots: false,
margin: 48,
responsive: false,
})
This is my ScrollReveal config
ScrollReveal({ reset: false }).reveal('.popular .item', { delay: 200, interval: 400, distance: '120px', origin: 'bottom', easing: 'ease-in-out' });
This must be scrollreveal problem, because when I disabled the scrollreveal in the section, all item appears in 100% or 90% viewport. But I don't know how to fix this bug.
