Сова Карусель не будет автоигрой

Я создаю WordPress сайт с каруселью JQuery, используя плагин Owl Carousel 2 JQuery. Раньше я с успехом пользовался этой каруселью, но я в тупике и мне нужна твоя помощь. Я надеюсь, что другие, кто может столкнуться с той же самой проблемой, могут сослаться на это решение, с которым вы все помогаете.

Карусель загрузится, изображения отобразятся, и большинство опробованных мной опций работают, но автозапуск не загрузит следующее изображение через 5 секунд. Все файлы находятся на своих местах и ​​загружаются правильно, что проверено с помощью инспектора сети Firebug. Спасибо за вашу помощь / предложения заранее!

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>

Я также пытался добавить owl.trigger('owl.play',6000); в функции document.ready согласно предложению в этом потоке stackru безрезультатно.

Источник

6 ответов

Догадаться. Вау, не могу поверить, что я пропустил это. Пришлось включить autoplay.js в раздел

<script src="owl/js/owl.autoplay.js"></script>
Источник

Я также столкнулся с подобной проблемой. Затем я искал и нашел решение, что autoplay должны быть исправлены как autoPlay с р в качестве капитала. И это сработало для меня.

Источник

Если вы загрузите его с Github ( папка OwlCarousel2 src), вы получите отдельные файлы, и вам нужно включить их, указав owl.autoplay.js & owl.carousel.js отдельно в вашем HTML.

Если вы загружаете его с веб-сайта Owl Carousel, owl.autoplay.js включается в файл owl.carousel.js.

Источник

Это глупое решение, но, возможно, кто-то может столкнуться с этим.

Я работал над другим кодом, поэтому он вызвал owlCarousel() с "autoPlay: false" в одном из включенных файлов JavaScript. Я вызвал его после того, как он вызвал функцию owlCarousel() с "autoPlay: true". Но это не работает, и браузер не выдает никаких уведомлений в консоли, если он дважды вызывает одну и ту же функцию.

Источник

Это то, что вам нужно сделать, когда вы вызываете owl-demo / owl-carousel, вам нужно добавить
| автозапуск: 3000 | (----- 3000 = 3 сек вращение между изображениями.
Вам не нужно больше ничего трогать.

$(document).ready(function() {

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

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

  });

});
Источник 
owl.owlCarousel({
        items:4,
        nav:true,
        loop:true,
        autoWidth:true,
        itemsTablet: [768,1]
    });

  1. Во-первых, вам нужно вызвать owl.autoplay.js.

  2. Этот код работает для меня:

    owl.trigger('play.owl.autoplay',[1000]);
Источник 
$(document).ready(function() {

      var owl = $('.owl-carousel');
        owl.owlCarousel({
            items:4,
            margin:10,
            autoPlay: 3000,
            autoplaySpeed:2000  
        });
});
Источник
Другие вопросы по тегам