Hi there, I'm currently testing out the auto play feature in owl carousel. One issue I've encountered is that when I switch to another tab in Chrome and then return to my webpage with the carousel, it stops functioning unless I manually drag the image. Here's the HTML and jQuery code I'm using:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Site</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="owl.carousel.min.css">
<link rel="stylesheet" href="owl.theme.default.min.css">
<script type="text/javascript" src="jquery.js"></script>
<script src="owl.carousel.min.js"></script>
</head>
<body>
<div class="owl-carousel">
<div> <img src="1.jpg"></div>
<div> <img src="2.jpg"></div>
<div> <img src="3.jpg"></div>
<div> <img src="4.jpg"></div>
<div> <img src="5.jpg"></div>
<div> <img src="6.jpg"></div>
</div>
<script>
$(document).ready(function(){
var owl = $(".owl-carousel")
owl.owlCarousel({
items:1,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:3000,
autoplayHoverPause:false
});
owl.trigger('play.owl.autoplay',[5000]);
});
</script>
</body>
</html>