yandex
image
3 sene önce eklendi.

Merhaba Arkadaşlar bu yazımda CSS ile Slider yapımını öğreniceğiz.Bu Sliderı sitenizde kullanarak kullanıcılara hoş bir görünüm sunabilirsiniz.

Yaptığımız örneği aşağıdan görüntüleyebilirsiniz.

 

Önizleme 

 

 CSS ile Slider Yapımı (Video)

CSS Slider Kodları

Html yapımız bu şekilde olucak kapsayıcı bölümümüz ise slider-wrapper olucak.Resimleri rastgele olarak Lorempixel adresinden alıcaz.Blogumda Lorem pixel ile ilgini yazımda mevcut.

 Lorempixel ile Rastgele Görsel

 

HTML yapısını oluşturduktan sonra slider-wrapper bölümünün Css kodlarını yazalım.

Slider boyutumuz 700x400 boyutunda olucak aşağıdaki gibi resimleri boyutlandırıyoruz.

Slider mantığında olduğu gibi resimlere float:left vererek yan yana sıralıyoruz ve +700pxlik bir left veriyoruz.

Şimdi kaydırma işlemini gerçekleştireceğimiz divi tanımlayalım bu divin adı slider olucak.Slider de 5 görsel olduğu için genişlik değerlerinin toplamı 2800px olucak.

Aşağıdaki şekildede animasyonun üzerine fare geldiğinde durması için gereken kodları yazalım.

Şimdide animasyonda olucak bilgi kutucuğunu yapalım.

Son olarakta keyframes yapısını oluşturalım.Keyframes hakkında bilgi sahibi olmak istiyorsanız aşağıdaki yazıma bakabilirsiniz.

CSS3 @keyframes Nedir? Nasıl Kullanılır ?

Evet tüm işlemler bitti sliderımız hazır rahatlıkla sitelerinizde kullanabilirsiniz.

 

Tüm Yorumlar ;