Clever Geek Handbook

Carousel owl won't start

I am creating a wordpress site with jQuery carousel using Owl Carousel 2 JQuery Plugin. I've used this carousel before with success, but I'm stumped and I need your help. I hope others who may be running into the same problem can refer to this solution that you are all dealing with.

The carousel will load, the images will be displayed, and most of the options I've tried work, but autoplay does not load the next image after 5 seconds. All files are in the correct location and are downloading correctly, as verified with the Firebug network inspector. Thanks 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've also tried adding owl.trigger('owl.play',6000);

to the document.ready function on the stackoverflow suggestion to no avail.

+3


source to share


7 replies


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



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


source


I also faced a similar problem. Then I searched and found a solution which autoplay

should be adjusted autoplay

with both p as capital. And it worked for me.



+5


source


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

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

+1


source


This is a stupid decision, but perhaps someone might come across it.

I was working in different code so it calls owlCarousel () with "autoPlay: false" in one of the included javascript files. I called him after calling the owlCarousel () function with the "autoPlay: true" function. But that didn't work and the browser doesn't provide any notification consoles if it calls the same function twice.

0


source 


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

  • First you need to call owl.autoplay.js.

  • This code works for me:

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


source


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

$(document).ready(function() {

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

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

  });

});
0


source 


$(document).ready(function() {

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


source






More articles:


All Articles