Owl Carousel Won't Autoplay

Question

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>

score 89 · Answer 1 · edited Mar 19 '15 at 13:57

89

Yes, its a typing error.

Write

autoPlay

not

autoplay

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

edited Mar 19 '15 at 13:57

Henri

3
2

answered Jan 29 '15 at 09:31

Matthias from Berlin

959
7
12

9

I was having this issue until I saw your post. I had set "autoPlay", but actually changing it to "autoplay" made it work for me. Weird. – Omid Ahourai Feb 27 '15 at 04:32
1

thanks, even on their own page its typing as lower case. – Kamuran Sönecek Mar 24 '16 at 14:24
1

Thank you very much. Have to say though that the official doc states it with lowercase, so it might depend on the OwlCarousel version you are using. – Florian Rachor Apr 11 '16 at 13:26
3

The version does matter. Owl Carousel 2 uses "autoplay". Older version uses "autoPlay". Also worth noting, in version 2 you must use "autoplayTimeout" to set the speed of the autoplay features. In older versions, this was actually set by the "autoPlay" option. – GRY Jul 08 '16 at 16:52
This typo is even on their site. http://www.owlcarousel.owlgraphic.com/demos/autoplay.html wasted time :(:( – Aamir Shahzad Jul 15 '16 at 10:50
Thanks mate, my version is 2.3.4 and the word is autoplay. – AlejandroDG Jul 11 '19 at 18:53
Can't believe codpen made this little mistake :( – Rishabh May 06 '21 at 04:43
2022 and this post is still useful. Thank you very much. – Sebastián Guerrero Aug 23 '22 at 17:28

1ronmat · Answer 2 · 2017-04-27T12:33:10.027

43

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

autoPlay is for 1st version

autoplay is for 2nd version

edited Apr 27 '17 at 12:33

answered Jun 29 '16 at 09:02

1ronmat

1,147
8
15

Link only answers are not a good practice. please add then in comments and not as answers.. – Shakti Phartiyal Apr 11 '17 at 08:37
Consider removing first link as it is no longer linking to desired place. Github for v 1: https://github.com/OwlFonk/OwlCarousel – Ian J Miller Apr 25 '17 at 23:14

Veegish Ramdani · Answer 3 · 2019-11-28T05:33:29.700

22

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

edited Nov 28 '19 at 05:33

answered Feb 08 '16 at 18:44

Veegish Ramdani

321
3
7

2

I can confirm this is working with the latest version ! – Scaraux May 11 '17 at 21:48
You need a comma after `autoPlayTimeout: 5000` to get `autoPlayTimeout: 5000,` – A McGuinness Jun 22 '19 at 15:47

score 9 · Answer 4 · edited Jun 04 '14 at 07:53

9

add this

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

edited Jun 04 '14 at 07:53

laalto

150,114
66
286
303

answered Jun 04 '14 at 07:35

M Arfan

4,384
4
29
46

score 5 · Answer 5 · answered Nov 26 '16 at 22:00

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
                    }
                }
            })

score 5 · Answer 6 · edited Nov 01 '18 at 21:57

5

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
});

edited Nov 01 '18 at 21:57

Sasha Tsukanov

1,025
9
20

answered Nov 01 '18 at 21:24

israel

181
1
6

I'm using 2.3.4, and I didn't find it was necessary to load owl.autoplay.js. Just loading owl.carousel.min.js (and jquery and the css files) worked fine. – createscape Nov 13 '20 at 22:31
@createscape Are you sure owl.autoplay.js is not cached in your browser. Maybe you can try another browser and see if it would still work. – israel Nov 25 '20 at 11:15
I have checked in another browser and it is working without loading the separate owl.autoplay.js file. – createscape Nov 26 '20 at 20:45

score 4 · Answer 7 · edited Feb 28 '15 at 08:15

4

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],
      });

edited Feb 28 '15 at 08:15

Marcin Nabiałek

109,655
42
258
291

answered Feb 28 '15 at 07:52

frank john

49
2

score 3 · Answer 8 · answered Mar 27 '14 at 05:44

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>

score 2 · Answer 9 · answered Jul 07 '14 at 16:50

2

Your Javascript should be

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

// Most important owl features

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

answered Jul 07 '14 at 16:50

XIMRX

2,130
3
29
60

score 2 · Answer 10 · answered Aug 29 '16 at 20:44

2

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 :)

answered Aug 29 '16 at 20:44

Zaheer Ahmad

176
2
11

score 1 · Answer 11 · answered Jul 28 '18 at 11:51

1

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

answered Jul 28 '18 at 11:51

aryalprakash

340
2
14

score 1 · Answer 12 · answered Jul 31 '18 at 07:25

1

If you using v1.3.3 then use following property

autoPlay : 5000

Or using latest version then use following property

autoPlay : true

answered Jul 31 '18 at 07:25

Ahmed Awan

347
3
9

score 1 · Answer 13 · answered Aug 02 '20 at 21:35

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.
});

Owl Carousel Won't Autoplay

15 Answers15

Linked

Related