Owl Carousel Will Not Autoplay

问题

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.

回答1:

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>

回答2:

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.

回答3:

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.

回答4:

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.

回答5:

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

回答6:

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"

  });

});

回答7:

$(document).ready(function() {

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

来源：https://stackoverflow.com/questions/26351046/owl-carousel-will-not-autoplay

标签

javascript

jquery

wordpress

carousel

owl-carousel