Perşembe , 23 Kasım 2017
Anasayfa » WEB » CSS » CSS Slider Yapımı

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.

Hakkında Sinem ÇİMEN

İlginizi Çekebilir

CSS Tablo Düzenleme

Verileri bir düzen içinde tutmak ve bu verileri kullanıcıların kolay bir biçimde okuyabileceği basit bir …

3 Yorumlar

  1. benim koyduğum resimlerin solundan 1 2 piksel kadar boşluk kalıyor anlayamadım.sizce neden olabilir.

    • Tarayıcı ‘a‘ etiketinin genişlik değerine ekleme yapıyor. Bunun için ilk resme eksi değerinde margin-left verirseniz sorun çözülmüş olacaktır. Taşan kısımlar da gizlendiği için bir sorun oluşmayacaktır.

  2. Css kullanarak slider yapma fikri ilginç geldi. Paylaşım için teşekkürler

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir