Swipper Slider içi Animasyon Yapımı
Selamlar; swipper slider'ı aktif olarak kullanmaya başladım.
Swipper slider içerisinde ki yazıları veya diğer objeleri slider değişince animasyonlu bir şekilde göstermek istiyorum. Bunu nasıl yapabilirim?
Swiper içerisinde on: kullanıp yapabilirsiniz. Bunun için AOS animasyon kütüphanesini projenize entegre etmeniz gerekiyor. Aşağıdaki kod benim projemde sorunsuz çalışıyor.
swiper içindeki yazılara text class ını verirseniz yazılar animasyonlu olarak gelecektir.
(tabii ki text class ı olan element içerisinde herhangi bir aos animasyonunu da kullanmanız gerekiyor.)
var swiper = new Swiper(".swiper-container", {
loop:true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
on: {
slideChangeTransitionStart: function () {
$('.text').hide(0);
$('.text').removeClass('aos-init').removeClass('aos-animate');
},
slideChangeTransitionEnd: function () {
$('.text').show(0);
AOS.init();
},
}
});