chouette carrousel slideSpeed ne fonctionne pas
J'ai plusieurs carrousels de hiboux sur ma page d'accueil. J'ai le premier (celui sur la livraison gratuite) réglé sur un slideSpeed de 10000. Comme vous pouvez voir tout le changement de diapositive à la même vitesse.
Y a-t-il une raison pour que cela ne fonctionne pas? Est-ce que je fais quelque chose de mal?
La lecture automatique est l'endroit où vous définissez la vitesse de changement de diapositive. Pas de diapositive
S'il vous plaît noter que vous devez utiliser
autoplay:true,
autoplayTimeout:5000
lors de l'utilisation de owlCarousel 2.0
Il suffit de régler l’heure sur lecture automatique option
$("#slider").owlCarousel({
autoPlay: 2500,
//autoPlay: true, <-- if you want to set default slide time (5000)
slideSpeed: 300,
paginationSpeed: 500,
singleItem: true,
navigation: true,
scrollPerPage: true
});
Remarque: cette réponse s'applique à Owl Carousel 2, et la vitesse de transitions en fondu uniquement . Si votre carrousel glisse plutôt que s’efface, ignorez cette réponse ..__ Ce n’est pas une réponse directe à la question initiale, mais cela contribuerait, espérons-le, à une compréhension plus générale de la façon de contrôler les vitesses de transition des glissières dans OwlCarousel 2. Comme je l’ai dit plus tôt de Google J'espère que vous tolérerez sa présence, car elle pourrait être utile à d’autres.
Je n’arrivais nulle part à essayer d’utiliser smartSpeed ou toute autre option pour définir la durée des transitions de fondu, mais après les avoir lus, ils utilisaient animate.css. J’imaginais que le fait d’ignorer la vitesse de transition css3 serait la clé. curseur et cela a fonctionné.
<style type="text/css">
.my-parent-class .owl-carousel .owl-item {
-webkit-animation-duration: 3s !important;
animation-duration: 3s !important;
}
</style>
Cela n'affecte pas la vitesse de glissement, mais atténue simplement la vitesse. Si vous avez un curseur coulissant, ce n'est pas la solution pour vous.
Dans ma fonction $(".owl-carousel").owlCarousel({}), je règle la lecture automatique comme suit:
autoplay: true,
autoplayTimeout: 5000,
La durée de la transition css3 pendant 3 secondes, combinée à 5000ms autoplayTimeout, signifie 2 secondes entre une fin de transition et la suivante - si vous souhaitez que la diapositive attende 5 secondes avant la transition suivante, vous devez ajouter le temps de transition CSS à autoplayTimeout, par exemple. autoplayTimeout: 8000 dans cet exemple.
jQuery('.owl-carousel').owlCarousel({
loop:true,
margin:10,
dots: true,
autoplay: 3000, // time for slides changes
smartSpeed: 1000, // duration of change of 1 slide
responsiveClass:true,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1,
loop:true
}
}
});
Bonjour, je suis en train d’utiliser Owl Carousel beta 2.0.0 J'ai trouvé une option pour retarder la vitesse des diapositives Modifier l’option "smartSpeed: millisecondes"
Essayez ce code:
mbanner = $("#mainbanner").owlCarousel({
items: 1,
loop: true,
autoplay: true,
responsiveClass: true,
center: true,
center: true,
});
Pour changer la vitesse à laquelle les curseurs glissent, vous devez appliquer cette ...
<style type="text/css">
.owl-stage {
transition: 0.8s !important;
}
</style>
... Cela ralentira les transitions.
pour changer la vitesse de glissement, testez ce code: ( autoplayTimeout property peut définir la durée de slid)
jQuery(document).ready(function ($) {
var ocClients = $("#Slider");
ocClients.owlCarousel({
loop: true,
nav: false,
autoplay: true,
autoplayTimeout: 2000,
dots: false,
autoplayHoverPause: false,
responsive: {
0: {
items: 1
},
480: {
items: 3
},
768: {
items: 4
},
992: {
items: 5
},
1200: {
items: 7
}
}
});
});