Swipper Slider içi Animasyon Yapımı

ahmetturk 1068 gün önce

487 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?

css

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (2)

muzafferbyrktr

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

#005077

debiyach

1068 gün önce

owlcarousel den ornek vereyim.
carousel itemlara default degerlerini ve tansitionlari giriyorum.
secili olan carousel item a active class owl tarafindan veriliyor.
active oldugunda ise istedigim animasyonu tanimliyorum.
en basiti translateY degerleri ve opacity ile aos benzeri guzel seyler yapabilirsin.

#005081