Сова Карусель не будет автоигрой
Я использую Сову Карусель на моем сайте. Согласно их документации, этот кусок JavaScript должен работать:
<script>
$("#intro").owlCarousel({
// Most important owl features
//Autoplay
autoPlay : 5000,
stopOnHover : false
)}
</script>
Но по какой-то причине он не будет воспроизводиться автоматически. Вот HTML-код слайдера:
<div id="intro" class="owl-carousel">
<div class="item first">
<div class="container">
<div class="row">
<div class="carousel-caption-left colour-white">
<h2>Title Text</h2>
<h1>Sub title text here.</h1>
<p>If you like you can even add a sentence or two here.</p>
</div>
</div>
</div>
<div class="overlay-bg"></div>
</div>
<div class="item second">
<div class="container">
<div class="carousel-caption-left colour-white">
<h2>Title Text</h2>
<h1>Sub title text here.</h1>
<p>If you like you can even add a sentence or two here.</p>
</div>
</div>
<div class="overlay-bg"></div>
</div>
<div class="item third">
<div class="container">
<div class="carousel-caption-left colour-white">
<h2>Title Text</h2>
<h1>Sub title text here.</h1>
<p>If you like you can even add a sentence or two here.</p>
</div>
</div>
<div class="overlay-bg"></div>
</div>
</div>
13 ответов
Да, это опечатка.
Написать
Автовоспроизведение
не
Автовоспроизведение
Код плагина autoplay определяет переменную как "autoPlay".
Возможно, вы находитесь на неправильной версии документа совы.
autoPlay is for 1st version
autoplay is for 2nd version
Изменение автозапуска на автозапуск само по себе не сработало. Что удалось сделать, так это добавить свойства autoplaySpeed и autoplayTimeout и установить для них одно и то же значение, например так:
$(document).ready(function(){
var owl = $(".owl-carousel");
owl.owlCarousel({
items: 1,
autoplay: true,
autoPlaySpeed: 5000,
autoPlayTimeout: 5000
autoplayHoverPause: true
});
});
Вот рабочая демонстрация: JS Bin
Более подробную информацию об этом можно найти здесь: https://github.com/smashingboxes/OwlCarousel2/issues/234
Вы должны установить свойства autoplay и autoplayTimeout. Я использовал этот код, и он работает для меня:
$('.owl-carousel').owlCarousel({
autoplay: true,
autoplayTimeout: 5000,
navigation: false,
margin: 10,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 2
}
}
})
В версии 2.3.4 вам нужно добавить плагин owl.autoplay.js. Затем сделайте следующее
var owl = $('.owl-carousel');
owl.owlCarousel({
items:1, //how many items you want to display
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:10000,
autoplayHoverPause:true
});
Этот код должен работать на вас
$("#intro").owlCarousel ({
slideSpeed : 800,
autoPlay: 6000,
items : 1,
stopOnHover : true,
itemsDesktop : [1199,1],
itemsDesktopSmall : [979,1],
itemsTablet : [768,1],
});
Просто опечатка,
<script>
$("#intro").owlCarousel({
// Most important owl features
//Autoplay
autoPlay : 5000,
stopOnHover : false
)} ----- TYPO
</script>
Так должно быть-
<script>
$("#intro").owlCarousel({
// Most important owl features
//Autoplay
autoPlay : 5000,
stopOnHover : false
}) ----- Correct
</script>
Версия Owl Carousel имеет большое значение, на данный момент (2 августа 2020 г.) версия2.3.4
и правильные варианты автозапуска:
$(".owl-carousel").owlCarousel({
autoplay : true,
autoplayTimeout: 3000,//Autoplay interval timeout.
loop:true,//Infinity loop. Duplicate last and first items to get loop illusion.
items:1 //The number of items you want to see on the screen.
});
Подробнее о конфигурациях Owl
Если вы используете v1.3.3, то используйте следующее свойство
autoPlay : 5000
Или используя последнюю версию, затем используйте следующее свойство
autoPlay : true
В моем случае автозапуск не работает, но автозапуск работает нормально
Я использовал только это
<script src="plugins/owlcarousel/owl.carousel.js"></script>
нет owl.autoplay.js это нужно, и моя версия карусели совы @version 2.0.0
надеюсь, что это поможет вам:)
Ваш Javascript должен быть
<script>
$("#intro").owlCarousel({
// Most important owl features
//Autoplay
autoplay: false,
autoplayTimeout: 5000,
autoplayHoverPause: true
)}
</script>
Настройка autoPlay: true
не работал для меня Но на настройке autoPlay: 5000
это сработало.
У меня была такая же проблема, и я не смог найти решение. Наконец я понял, что с owlcarousel вер. 2.3.4 Я должен включить не только файл owl.carousel.js, но и файл owl.autoplay.js.
Во-первых, вам нужно вызвать owl.autoplay.js.
этот код работает для меня: owl.trigger('play.owl.autoplay',[1000]);