Owl carousel fade не работает с bootstrap 4

Question

У меня есть слайдер карусели совы, и мне нужен эффект затухания. Согласно документу owl carousel, необходимо добавить анимированную библиотеку css. Итак, я добавил его на свой сайт. Но это совсем не работает. Кажется, все уложены за каждым слайдом.

Вот мои варианты слайдера

$('.home-slider-2').owlCarousel({
    animateOut: 'slideOutDown',
    animateIn: 'flipInX',
    items:1,
    margin:30,
    stagePadding:30,
    smartSpeed:450
});

Итак, я пробовал вот так,

Удалите bootstrap 4 jQuery slim и добавьте полную версию.
Отрегулируйте smartSpeed: от 450 до выше

Все равно не повезло. Вот моя скрипка

Любая помощь?

javascript html jquery css owl-carousel-2

0

Janath 11 Фев 2021 в 20:41

Answer 1

Проблема здесь в том, что Owl carousel использует версию 3.x из animate.css. В последней версии animate.css (4.x) нам нужно добавить класс animate__animated к этому элементу, который мы хотим анимировать, тогда как в версии 3.x нам нужно было добавить класс animated к элементу .

Owl carousel используется для автоматического добавления класса animated, и вам просто нужно указать желаемую анимацию.

Теперь есть два способа сделать это:

Либо вы измените тег ссылки на:

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"/>

Из:

<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

Или измените классы в js в соответствии с новой версией, например:

$(".home-slider-2").owlCarousel({
   animateOut: "animate__animated animate__slideOutDown",
   animateIn: "animate__animated animate__flipInX",
   items: 1,
   smartSpeed: 450
});

Проверьте это в действии на Codepen: https://codepen.io/manaskhandelwal1/pen/ZEBBXPw

Примечание

Файл animate.css должен располагаться над файлами Owl carousel.

Для этого вам следует использовать лучшую библиотеку, потому что даже OwlCarousel2 GitHub говорит

ДА, ТАК ЭТО СОВЕРШЕННО МЕРТВО, сделайте себе одолжение и переключитесь на tiny-slider

1

Manas Khandelwal 11 Фев 2021 в 18:58

Answer 2

Чтобы использовать Anime.css, вам необходимо добавить следующие классы к элементам «animate__animated animate _ (здесь идет ваше имя анимации)»

Попробуйте что-то вроде этого

animateOut: 'animate__animated animate__slideOutDown',
animateIn: 'animate__animated animate__flipInX',

1

cri_pava 11 Фев 2021 в 18:30

Owl carousel fade не работает с bootstrap 4

2 ответа

Теперь есть два способа сделать это:

Новые вопросы

javascript