I seem to be encountering an issue with the auto play functionality of the owl carousel. I have uploaded and included all the necessary files, and it is functioning properly when initially loaded. The auto play feature works perfectly, but when I hover over any of the slides, it stops (and I actually want it to stop on hover). Furthermore, once I release the mouse, it does not resume playing. Additionally, when switching between browser tabs and returning to the tab where the carousel is located, it permanently stops at that point as well. In order to get it playing again, I need to click and drag it with the mouse cursor.
Despite consulting the official "Owl carousel" website and various threads such as Thread 01, Thread 02, and Thread 04, I have tried implementing all the suggested solutions to no avail. Nothing seems to change.
This is my code:
<section id="demos">
<div class="row">
<div class="large-12 columns">
<div class="owl-carousel owl-theme">
<div class="item">
<img src="carousel-03.png" alt="Owl Image">
<h2>Logo Design</h2>
<p>Our logo designs are unique enough to get you the trademark and compelling enough to help you get clients. Get a logo done by us and see for yourself.</p>
</div>
<div class="item">
<img src="carousel-05.png" alt="Owl Image">
<h2>Stationery Design</h2>
<p>We design business cards and stationery which Convey the professionalism and seriousness of your business to your customers.</p>
</div>
<div class="item">
<img src="carousel-02.png" alt="Owl Image">
<h2>Flyers & Brochures</h2>
<p>We design brochures which depict your services in an impressive way to both current and potential clientele.</p>
</div>
<div class="item">
<img src="carousel-01.png" alt="Owl Image">
<h2>Apps Design</h2>
<p>We design Apps which depict your services in an impressive way to both current and potential clientele.</p>
</div>
<div class="item">
<img src="carousel-04.png" alt="Owl Image">
<h2>Labels and Packaging</h2>
<p>We design Labels and Packaging which depict your services in an impressive way to both current and potential clientele.</p>
</div>
</div>
</div>
</div>
</section>
This is my JavaScript:
<script>
$(document).ready(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
loop: true,
nav: false,
navSpeed: 2000,
slideSpeed : 2000,
dots: false,
dotsSpeed: 2000,
lazyLoad: false,
autoplay: true,
autoplayHoverPause: true,
autoplayTimeout: 5000,
autoplaySpeed: 800,
margin: 0,
stagePadding: 0,
freeDrag: false,
mouseDrag: true,
touchDrag: true,
slideBy: 1,
fallbackEasing: "linear",
responsiveClass: true,
navText: [ "previous", "next" ],
responsive: {
0: {
items: 1,
nav: false
},
600: {
items: 2,
nav: false
},
1000: {
items: 3,
nav: false,
margin: 20
}
}
});
owl.on('mousewheel', '.owl-stage', function (e) {
if (e.deltaY>0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
})
</script>
The following files have been included:
<link rel="stylesheet" href="css/owl.carousel.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/owl.autoplay.js"></script>
<script src="js/owl.autorefresh.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/highlight.js"></script>
<script src="js/app.js"></script>
Thank you in advance for your assistance.