Owl Carousel ne veut pas faire D'Autoplay
j'utilise la Chouette carrousel sur mon site. Selon leur documentation, Ce JavaScript devrait fonctionner:
<script>
$("#intro").owlCarousel({
// Most important owl features
//Autoplay
autoPlay : 5000,
stopOnHover : false
)}
</script>
mais pour une raison quelconque, il ne sera pas autoplay. Voici le HTML du slider:
<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>
12 réponses
Oui, c'est une erreur de frappe.
Ecrire
lecture automatique
lecture automatique
le code autoplay-plugin définit la variable comme "autoPlay".
Vous êtes peut-être sur le mauvais de la chouette version doc.
autoPlay is for 1st version
autoplay is for 2nd version
changer autoplay en autoPlay seul n'a pas fonctionné pour moi. Ce qui a fait l'affaire, c'est d'ajouter les propriétés autoplaySpeed et autoplayTimeout et de les mettre à la même valeur, comme ceci:
$(document).ready(function(){
var owl = $(".owl-carousel");
owl.owlCarousel({
items: 1,
autoplay: true,
autoPlaySpeed: 5000,
autoPlayTimeout: 5000
autoplayHoverPause: true
});
});
Voici une démo qui fonctionne: js Bin
Plus d'informations à ce sujet peuvent être trouvées ici:https://github.com/smashingboxes/OwlCarousel2/issues/234
Ce code devrait fonctionner pour vous
$("#intro").owlCarousel ({
slideSpeed : 800,
autoPlay: 6000,
items : 1,
stopOnHover : true,
itemsDesktop : [1199,1],
itemsDesktopSmall : [979,1],
itemsTablet : [768,1],
});
Vous devez définir les deux lecture automatique et autoplayTimeout propriétés. J'ai utilisé ce code et il fonctionne pour moi:
$('.owl-carousel').owlCarousel({
autoplay: true,
autoplayTimeout: 5000,
navigation: false,
margin: 10,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 2
}
}
})
Dans mon cas lecture automatique pas de travail, mais lecture automatique fonctionne bien
j'ai utilisé seulement ce
<script src="plugins/owlcarousel/owl.carousel.js"></script>
pas de hibou.autoplay.js est besoin et mon owl carousel version est @version 2.0.0
j'espère que cette chose vous aider :)
Juste une Erreur de frappe,
<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>
votre Javascript doit être
<script>
$("#intro").owlCarousel({
// Most important owl features
//Autoplay
autoplay: false,
autoplayTimeout: 5000,
autoplayHoverPause: true
)}
</script>
si vous utilisez v1.3.3 puis utilisez la propriété suivante
autoPlay : 5000
Ou utiliser la dernière version puis utiliser la propriété suivante
autoPlay : true
tout d'Abord, vous devez appeler le hibou.autoplay.js.
ce code fonctionne pour moi : chouette.trigger('jouer.hibou.autoplay', [1000]);
autoPlay: true ne fonctionne pas pour moi.
Mais sur la configuration de autoPlay: 5000 ça a marché.