Как скрестить плагины OWL Carousel и AOS?
Для слайдера я использую плагин OWL Carousel, для анимации AOS. Как сделать, чтобы при смене слайда внутри него запускалась анимация?
Пробовал так:
$('.slider-items--slides').owlCarousel({ items: 1, margin: 0, loop: true, stagePadding: 0, dots: true, dotsContainer: '.slider-items--dots', smartSpeed: 450, animateOut: 'fadeOut', }); $('.slider-items--slides').on('changed.owl.carousel', function (event) { var currentItem = event.item.index; $('.slider-items--slides .owl-item .slide-item').hide(); $('.slider-items--slides .owl-item').eq(currentItem).find('[data-aos]').each(function () { $(this).removeAttr('data-aos'); $(this).removeClass('aos-init'); }); setTimeout(function () { $('.slider-items--slides .owl-item').eq(currentItem).find('.slide-item').fadeIn(); AOS.refresh(); }, 1000); }); |
$('.slider-items--slides').owlCarousel({ items: 1, margin: 0, loop: true, stagePadding: 0, dots: true, dotsContainer: '.slider-items--dots', smartSpeed: 450, animateOut: 'fadeOut', }); $('.slider-items--slides').on('changed.owl.carousel', function (event) { var currentItem = event.item.index; $('.slider-items--slides .owl-item .slide-item').hide(); $('.slider-items--slides .owl-item').eq(currentItem).find('[data-aos]').each(function () { $(this).removeAttr('data-aos'); $(this).removeClass('aos-init'); }); setTimeout(function () { $('.slider-items--slides .owl-item').eq(currentItem).find('.slide-item').fadeIn(); AOS.refresh(); }, 1000); });
но не работает
Дополнительно:
Ответы:
Первый вариант сделать без доп библиотек. Попробуйте использовать стандартный css3.
https://owlcarousel2.github.io/OwlCarousel2/demos/...
Второй вариант, подключить либу, которую они предлагают:
https://animate.style/
Там просто поменять значение:
animateOut: 'fadeOut'
на другое значение из либы.
У меня вот так работает:
$('.owl-carousel').owlCarousel({ loop:true, margin:10, nav:true, responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:5 } } }).on('changed.owl.carousel', function (event) { var currentItem = event.item.index; setTimeout(function () { $('.owl-carousel .item').eq(currentItem).css("background-color", "yellow"); }, 1000); }); <div class="owl-carousel owl-theme"> <div class="item"><h4>1</h4></div> <div class="item"><h4>2</h4></div> <div class="item"><h4>3</h4></div> <div class="item"><h4>4</h4></div> <div class="item"><h4>5</h4></div> <div class="item"><h4>6</h4></div> <div class="item"><h4>7</h4></div> <div class="item"><h4>8</h4></div> <div class="item"><h4>9</h4></div> <div class="item"><h4>10</h4></div> <div class="item"><h4>11</h4></div> <div class="item"><h4>12</h4></div> </div> |
$('.owl-carousel').owlCarousel({ loop:true, margin:10, nav:true, responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:5 } } }).on('changed.owl.carousel', function (event) { var currentItem = event.item.index; setTimeout(function () { $('.owl-carousel .item').eq(currentItem).css("background-color", "yellow"); }, 1000); }); <div class="owl-carousel owl-theme"> <div class="item"><h4>1</h4></div> <div class="item"><h4>2</h4></div> <div class="item"><h4>3</h4></div> <div class="item"><h4>4</h4></div> <div class="item"><h4>5</h4></div> <div class="item"><h4>6</h4></div> <div class="item"><h4>7</h4></div> <div class="item"><h4>8</h4></div> <div class="item"><h4>9</h4></div> <div class="item"><h4>10</h4></div> <div class="item"><h4>11</h4></div> <div class="item"><h4>12</h4></div> </div>
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы скрестить плагины OWL Carousel и AOS (Animate On Scroll), вам потребуется немного дополнительного кода и настройки. OWL Carousel используется для создания карусели изображений или контента, а AOS - для анимации элементов при прокрутке страницы.
Ниже приведен пример кода, который позволит вам объединить эти два плагина:
<title>OWl Carousel + AOS Example</title> <div class="owl-carousel"> <div class="item" data-aos="fade-right">1</div> <div class="item" data-aos="fade-left">2</div> <div class="item" data-aos="fade-right">3</div> </div> $(document).ready(function(){ $(".owl-carousel").owlCarousel(); AOS.init(); });<title>OWl Carousel + AOS Example</title> <div class="owl-carousel"> <div class="item" data-aos="fade-right">1</div> <div class="item" data-aos="fade-left">2</div> <div class="item" data-aos="fade-right">3</div> </div> $(document).ready(function(){ $(".owl-carousel").owlCarousel(); AOS.init(); });
В данном примере мы подключаем стили и скрипты для OWL Carousel и AOS. Затем создаем элементы для карусели, добавляем к ним атрибуты для анимации AOS. В JavaScript инициализируем плагины OWL Carousel и AOS.
Теперь при прокрутке страницы элементы в карусели будут анимироваться с помощью AOS. Не забудьте подключить jQuery перед подключением скриптов плагинов.
Надеюсь, этот пример поможет вам скрестить плагины OWL Carousel и AOS на вашем сайте. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.