I am currently customizing an HTML5 template that utilizes the Owl Carousel 1.3.2. My goal is to incorporate a smooth fade animation when transitioning between slider images. The code snippet below works perfectly in the Mozilla Browser, however, I'm encountering an issue with the Chrome browser as it still displays the default left-right animation.
jQuery(window).load(function() {
"use strict";
jQuery("#layout").owlCarousel({
pagination: false,
autoPlay: 4000,
slideSpeed: 600,
transitionStyle: "fade",
navigation: false,
singleItem: true
});
});
HTML Code:
<div id="layout" class="owl-carousel">
<div class="item"><img src="sliders/slider_1.png" alt=""></div>
<div class="item"><img src="sliders/slider_2.png" alt=""></div>
<div class="item"><img src="sliders/slider_3.png" alt=""></div>
<div class="item"><img src="sliders/slider_4.png" alt=""></div>
<div class="item"><img src="sliders/slider_5.png" alt=""></div>
</div>
</div>
Any insights on what could be causing this discrepancy?