v2.5.2
Giriş yap

Swipper Slider içi Animasyon Yapımı

ahmetturk
607 defa görüntülendi

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?

muzafferbyrktr
1274 gün önce

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();
    },
  } 
});