Css Fade Slider

Bu yazımızda CSS ile ‘Fade’ animasyonlu slider yapacağız.

 

HTML:
İlk olarak slider için bir div oluşturuyoruz. Bu divin içerisine istediğimiz sayıda resim ekliyoruz. Resim etiketlerine class atayarak css te düzenlemelerini yazacağız.

CSS:
Oluşturduğumuz slider divinin genişlik ve yükseklik değerlerini ayarlıyoruz. Position değerini relative olarak ayarlıyoruz.

İlk olarak slidera konulacak resimlerin boyutlarını ayarlıyoruz. Daha sonra sliderı ekranın ortasına gelecek şekilde ayarlıyoruz. Resimler şimdilik alt alta gelecekler.

Slidelara geçiş efekti veriyoruz. Bu yazımızda kendi efektimizi @keyframe ile tanımlayacağız. Slideların geçiş süresini ve kaç kez tekrarlanacağını yazıyoruz. İnfinite yaparak sürekli tekrarlanmasını sağladık. Yükseklik ve genişlik değerlerini içinde bulundukları divin genişliğine tam uyacak şekilde ayarlıyoruz. Resimlerin arka arkaya durması için position değerlerini absolute olarak ayarlıyoruz.

@keyframeler ile efektleri oluştururken resimlerin opacity değerleri ile işlem yapacağız. Örneğimizde 4 resim kullandığımız için dört ayrı fade animasyonu belirledik ve her birinin opacity sırasını ayarlıyoruz.

Ekran çıktısı şu şekilde olacaktır;