Owl Carousel Will Not Autoplay

Question

I'm building a wordpress site with a JQuery carousel using the Owl Carousel 2 JQuery plugin. I've used this carousel before with success, but I'm stumped on this one and I need your help. I'm hoping others who may run into the same issue can reference this solution you all help with.

The carousel will load, images are displaying, and most options that I've tried are working, but autoplay will not load the next image after 5 seconds. All files are in their proper place and loading correctly, as verified using the Firebug network inspector. Thank you for your help/suggestions in advance!

customjs.js:

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

HTML:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>     
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="owl/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="customjs.js"></script>
</head>
<body>    
<div id="feature" class="full">
<!-- FEATURE ROTATOR -->
<div id="home-feature" class="owl-carousel owl-theme">
      <div class="item"> 
        <a href="#">
            <img src="/images/home/rotator1.jpg"
                  alt="Feature 1"/>
        </a>
      </div>
      <div class="item"> 
        <a href="#">
            <img src="/images/home/rotator2.jpg"
                  alt="Feature 2"/>
        </a>
      </div>
      <div class="item"> 
        <a href="#">
            <img src="/images/home/rotator3.jpg"
                  alt="Feature 3"/>
        </a>
      </div>
      <div class="item"> 
        <a href="#">
            <img src="/images/home/rotator4.jpg"
                  alt="Feature 4"/>
        </a>
      </div>                
</div>
</div> 
</body>

I have also tried appending owl.trigger('owl.play',6000); within the document.ready function per a suggestion on this stackoverflow thread to no avail.

I would wait for the final release before using it on actual sites, there's still a lot of stuff to be worked out. — Christina, Oct 15 '14 at 14:39

score 7 · Answer 1 · answered Oct 14 '14 at 01:25

7

Figured it out. Wow, can't believe I missed that. Had to include the autoplay.js in the section

<script src="owl/js/owl.autoplay.js"></script>

answered Oct 14 '14 at 01:25

user4139460

101
1
1
5

score 5 · Answer 2 · edited Oct 29 '16 at 14:21

5

I also faced a similar issue. Then I searched and found a solution that the autoplay should be re-corrected as autoPlay with p as capital. And it worked for me.

edited Oct 29 '16 at 14:21

Prashanth Benny

1,523
21
33

answered Oct 22 '15 at 06:10

Chamath Nimantha

169
1
4

1

You saved my 30 mins!. Thanks. – Ansuraj Khadanga Jun 15 '16 at 22:04
1

Thanks a lot man...i was using 1.3.2 version of OWL. It works properly now. – Avijit Kumar Mar 06 '17 at 21:21

score 2 · Answer 3 · answered May 07 '15 at 07:34

If you download it from Github (OwlCarousel2 src folder) you will get seperate files and you need to include it specify owl.autoplay.js & owl.carousel.js separately in your HTML.

If you download it from Owl Carousel´s website owl.autoplay.js is included in the owl.carousel.js file.

score 0 · Answer 4 · answered Jan 30 '16 at 10:36

It's stupid solution but maybe somebody can face with it.

I've worked in others code, so he call owlCarousel() with "autoPlay: false", in one of included javascript files. I called it after he call owlCarousel() function with "autoPlay: true". But it's not worked and also browser don't give any notification inn console if it's calling twice the same function.

score 0 · Answer 5 · edited Mar 22 '16 at 15:01

0

owl.owlCarousel({
        items:4,
        nav:true,
        loop:true,
        autoWidth:true,
        itemsTablet: [768,1]
    });

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

This code works for me:

owl.trigger('play.owl.autoplay',[1000]);

edited Mar 22 '16 at 15:01

Mogsdad

44,709
21
151
275

answered Mar 22 '16 at 15:00

Kako Sabolo

109
2

score 0 · Answer 6 · edited Jul 26 '16 at 12:21

0

This is what you need to do, when you call the owl-demo / owl-carousel you need to add
| autoPlay: 3000 | (----- 3000 = 3sec rotation between images.
You don't need to touch anything else.

$(document).ready(function() {

  var owl = $("#owl-demo");

  owl.owlCarousel({
    navigation : false,
    singleItem : true,
    autoPlay: 3000,
    transitionStyle : "fadeUp"

  });

});

edited Jul 26 '16 at 12:21

Robert Longson

118,664
26
252
242

answered Jul 26 '16 at 12:15

Ali

1

score 0 · Answer 7 · edited Sep 24 '19 at 11:57

0

$(document).ready(function() {

      var owl = $('.owl-carousel');
        owl.owlCarousel({
            items:4,
            margin:10,
            autoPlay: 3000,
            autoplaySpeed:2000  
        });
});

edited Sep 24 '19 at 11:57

MaartenDev

5,631
5
21
33

answered Sep 24 '19 at 11:04

suneera

1
1

Owl Carousel Will Not Autoplay

7 Answers7

Linked