Owl Carousel не автовоспроизведен

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

Карусель загружается, изображения отображаются, и большинство параметров, которые я пробовал, работают, но автовоспроизведение не загружает следующее изображение через 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 функции за предложением на this stackoverflow thread но безрезультатно.

источник

2014-10-14 user4139460

Я бы дождался окончательного релиза, прежде чем использовать его на реальных сайтах, все еще есть много вещей, которые нужно разработать. – Christina

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

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

источник

2014-10-14 01:25:37 user4139460

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

Если загрузить с веб-сайта Owl Carousel´sowl.autoplay.js входит в owl.carousel.js файлов.

источник

2015-05-07 07:34:34 0x1ad2

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

источник

2015-10-22 06:10:23 chamath

Вы сохранили мои 30 минут !. Благодарю. –

Большое спасибо человеку ... Я использовал версию OWL версии 1.3.2. Теперь он работает правильно. –

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

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

источник

2016-01-30 10:36:28 sambua

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

Во-первых, вам нужно вызвать owl.autoplay.js.
Этот код работает для меня:
```
owl.trigger('play.owl.autoplay',[1000]); 
```

источник

2016-03-22 15:00:15

Это то, что вам нужно сделать, когда вы вызываете совы демонстрационную/филин-карусель вам нужно добавить
| autoPlay: 3000 | (----- 3000 = вращение 3 секунды между изображениями.
Вам ничего не нужно трогать.

$(document).ready(function() { 

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

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

    }); 

});

источник

2016-07-26 12:15:50 Ali

Owl Carousel не автовоспроизведен

ответ

Смежные вопросы