У меня есть Карусель Совы примерно на полпути вниз здесь: https://www.lakeshoresup.com/product/pathfinder/
Я хочу снизить скорость затухания анимации. Я пробовал SlideSpeed и PaginationSpeed в сове jQuery, и это не сработало:
<script>
jQuery(window).on("load", function(){
jQuery('.carousel-wrapper .owl-carousel').owlCarousel({
items: 1,
autoplay: true,
autoplayTimeout: <?php if (!$autotimer) {echo 3000;} else {echo $autotimer;} ?>,
nav: true,
loop: true,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
slideSpeed: 3000,
paginationSpeed: 3000,
navText: ['<span>prev</span>', '<span>next</span>']
});
});
Я также пробовал продолжительность анимации в css:
.owl-caraousel .animated {
animation-duration: 3000ms !important;
}
Есть идеи, как замедлить эту анимацию. Мы используем fadeIn и fadeOut, которые выглядят так:
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
Спасибо! Это сработало. Я просто использовал неправильный класс.






Вы можете добавить продолжительность анимации: [число] с; в .fadeIn, чтобы изменить продолжительность затухания.
Используйте smartSpeed:1500 в JavaScript
Смотрите здесь https://owlcarousel2.github.io/OwlCarousel2/demos/animate.html
I also tried animation-duration in the css:
.owl-caraousel .animated { animation-duration: 3000ms !important; }
Использовать
.owl-carousel .animated {
вместо
.owl-caraousel .animated {
На этой странице: stackoverflow.com/questions/26443205/… Я обнаружил, что решение
.owl-carousel .owl-item {animation-duration: 3s !important;}может сработать для вас.