Сова Скорость Анимации Карусели

У меня есть Карусель Совы примерно на полпути вниз здесь: 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;
}

На этой странице: stackoverflow.com/questions/26443205/… Я обнаружил, что решение .owl-carousel .owl-item {animation-duration: 3s !important;} может сработать для вас.

ReSedano 16.12.2018 03:15

Спасибо! Это сработало. Я просто использовал неправильный класс.

Matt 17.12.2018 19:46
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
2
5 715
3

Ответы 3

Вы можете добавить продолжительность анимации: [число] с; в .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 {

Другие вопросы по теме