Search code examples
javascriptjqueryowl-carousel

Owl carousel autoplay and stopOnHover not working

I am playing around with a boostrap theme that is using Owl carousel.

This is the theme I am using

https://demo.themewagon.com/preview/free-html5-bootstrap-4-travel-agency-website-template-ecoland

As you can see on the link the owl-carousel is used in two places

  1. for hero slide on top of the page
  2. for testimonials.

I would like to slow down the speed of slides and make them stop sliding on hover.

I added a script to bottom of page that looks like this:

<script>
$(".owl-carousel").owlCarousel({
 //Autoplay
 autoplay:true,
 autoplayTimeout:10000, 
 stopOnHover : true
})
</script>
<script src="/js/owl.carousel.min.js"></script>

<div class="home-slider owl-carousel enablescroll">

This script is not working so far and I am not sure what to change.

Any advice appreciated.

Solution

  • Try using autoplaySpeed and autoplayHoverPause

    $(".owl-carousel").owlCarousel({
 //Autoplay
 autoplay: true,
 autoplaySpeed:10000, 
 autoplayHoverPause: true
})