[javascript] Owl Carousel Won't Autoplay

I'm using the Owl Carousel on my site. According to their documentation, this piece of JavaScript should work:

<script>
$("#intro").owlCarousel({

// Most important owl features

//Autoplay
autoPlay : 5000,
stopOnHover : false
)}
</script>

But for some reason it will not autoplay. Here is the HTML of the slider:

<div id="intro" class="owl-carousel">
    <div class="item first">
      <div class="container">
        <div class="row">
          <div class="carousel-caption-left colour-white">
            <h2>Title Text</h2>
            <h1>Sub title text here.</h1>
            <p>If you like you can even add a sentence or two here.</p>
          </div>
        </div>
      </div>
      <div class="overlay-bg"></div>
    </div>
    <div class="item second">
      <div class="container">
        <div class="carousel-caption-left colour-white">
          <h2>Title Text</h2>
          <h1>Sub title text here.</h1>
          <p>If you like you can even add a sentence or two here.</p>
        </div>
      </div>
      <div class="overlay-bg"></div>
    </div>
    <div class="item third">
      <div class="container">
        <div class="carousel-caption-left colour-white">
          <h2>Title Text</h2>
          <h1>Sub title text here.</h1>
          <p>If you like you can even add a sentence or two here.</p>
        </div>
      </div>
      <div class="overlay-bg"></div>
    </div>
</div>

With version 2.3.4, you need the to add the owl.autoplay.js plugin. Then do the following

var owl = $('.owl-carousel');
owl.owlCarousel({
   items:1, //how many items you want to display
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:10000,
    autoplayHoverPause:true
});

You should set both autoplay and autoplayTimeout properties. I used this code, and it works for me:

$('.owl-carousel').owlCarousel({
                autoplay: true,
                autoplayTimeout: 5000,
                navigation: false,
                margin: 10,
                responsive: {
                    0: {
                        items: 1
                    },
                    600: {
                        items: 2
                    },
                    1000: {
                        items: 2
                    }
                }
            })

Changing autoplay to autoPlay alone did not work for me. What did the trick was to add autoplaySpeed and autoplayTimeout properties and set them to the same value, like this:

$(document).ready(function(){
    var owl = $(".owl-carousel");
    owl.owlCarousel({
        items: 1,
        autoplay: true,
        autoPlaySpeed: 5000,
        autoPlayTimeout: 5000,
        autoplayHoverPause: true
    });
});

Here's a working demo: JS Bin

More info about this can be found here: https://github.com/smashingboxes/OwlCarousel2/issues/234

In my case autoPlay not working but autoplay is working fine

I only used this

<script src="plugins/owlcarousel/owl.carousel.js"></script>

no owl.autoplay.js is need it & my owl carousel version is @version 2.0.0

hope this thing help you :)

add this

owl.trigger('owl.play',6000);

You are may be on the wrong owl's doc version.

autoPlay is for 1st version

autoplay is for 2nd version

Setting autoPlay: true didn't work for me. But on setting autoPlay: 5000 it worked.

Yes, its a typing error.

Write

autoPlay

not

autoplay

The autoplay-plugin code defines the variable as "autoPlay".

Owl Carousel version matters a lot, as of now (2nd Aug 2020) the version is 2.3.4 and the right options for autoplay are:

$(".owl-carousel").owlCarousel({
    autoplay : true,
    autoplayTimeout: 3000,//Autoplay interval timeout.
    loop:true,//Infinity loop. Duplicate last and first items to get loop illusion.
    items:1 //The number of items you want to see on the screen.
});

Read more Owl configurations

If you using v1.3.3 then use following property

autoPlay : 5000

Or using latest version then use following property

autoPlay : true

Your Javascript should be

<script>
$("#intro").owlCarousel({

// Most important owl features

//Autoplay
autoplay: false,
autoplayTimeout: 5000,
autoplayHoverPause: true
)}
</script>

1. First, you need to call the owl.autoplay.js.

2. this code works for me : owl.trigger('play.owl.autoplay',[1000]);

I had the same problem and couln't find the solution. Finally I realized, that with owlcarousel ver. 2.3.4 I have to include not only owl.carousel.js, but owl.autoplay.js file too.

Just a Typing Error,

<script>
$("#intro").owlCarousel({

// Most important owl features

//Autoplay
autoPlay : 5000,
stopOnHover : false
)} ----- TYPO
</script>

It should be-

<script>
$("#intro").owlCarousel({

// Most important owl features

//Autoplay
autoPlay : 5000,
stopOnHover : false
}) ----- Correct
</script>

This code should work for you

$("#intro").owlCarousel ({

        slideSpeed : 800,
        autoPlay: 6000,
        items : 1,
        stopOnHover : true,
        itemsDesktop : [1199,1],
        itemsDesktopSmall : [979,1],
        itemsTablet :   [768,1],
      });