CSS

CSS Slider Yapımı

Bu yazımızda CSS ile Basit Slider yapacağız.
İlk olarak slidera konulacak resimlerin boyutlarını ayarlıyoruz. Bu örneğimizde ben 700×400 boyutlarda bir resim kullanıyorum. İlk olarak sliderı ekranın ortasına gelecek şekilde ayarlıyoruz. Resimler şimdilik alt alta gelecekler.

Slider için kapsayıcı bir div açıyoruz. Burası ekranda görülecek olan kısmımız. ‘Slider’ adını verdiğimiz div ise resimlerin toplam genişlikleri kadar olacak olan kısım. Bu sayede resimler yan yana duracaklar.
HTML:

CSS:

Kapsayıcı olarak açtığımız divin genişliğini ve yüksekliğini resimlerin boyutunda ayarlıyoruz ve sadece 1 resmin görülebilmesi için ‘overflow:hidden’ ile diğer resimlerin görünmemesini sağlıyoruz. Position:Relative olarak ayarlıyoruz. Oluşturduğumuz sliderın kayarak geçmesi için slider adını verdiğimiz divin Position özelliğini Absolute olarak ayarlayacağız.

Daha sonra resimlerin ilk konumlarını ayarlıyoruz. İlk resmin konumunu 0(sıfır) olarak ayarladıktan sonra diğer resimleri genişlikleri kadar kaydırıyoruz.

Slider divinin genişliğini konulacak resimlerin toplam genişliği kadar yapıyoruz. Bu örnekte 3 resim koyacağımız için 2800px olarak belirledik. Bunları tarayıcılar için okunabilir duruma getirmek için ise webkit kullanıyoruz. Tarayıcının yorumlayacağı kısımlarda geçiş süresini, animasyon adını ve kaç kez tekrarlanacağını belirliyoruz.

Daha sonra CSS3 ile kullanılan başlangıç ve bitiş olaylarını ayarladığımız keyframe’leri ekliyoruz. Slider sola doğru hareket edeceği için –(eksi) yöndeki konumlarını ayarlıyoruz.

Ekran Çıktısı şu şekilde olacaktır.

Yorum

Yorum Yap