Sadece CSS ile Slider Yapımı

css3-logoHaftada bir düzenli olarak “Slider yapımı hakkında daha fazla konu yazın!” şeklinde tehditkar mailler alıyoruz.

Hal böyle olunca oturup çalıştık, sizler için şık ve kolay hazırlanabilir bir slider tasarladık. Sadece CSS ile çalışan bu slider benzerlerinin aksine yazı ve üzerine gelince durma desteği de sunuyor. Böylece sıradan bir slider için web sayfamıza yüzlerce satır JavaScript yükü bindirmemiş oluyoruz.

Bu makalemizde sizlere CSS3‘ün animation tanımı sayesinde kusursuz bir slider hazırlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

Sitenize Slider Ekleyin

Günümüz web trendlerinden biri olan sliderlar için yüzlerce alternatif internette gezmekte. Sadece Adobewordpress olarak biz bile bu konuyla alakalı 2 makale, 1 WordPress eklentisi yazdık. Bu da onların en yenisi.

Kolları sıvayıp kodlarımızı yazmaya başlayalım.

CSS Kodları

İlk olarak Adobewordpress Slider olarak isimlendirdiğimiz bu tasarımın dış çerçevesini oluşturalım. 800×330 piksellik bir sunum olacak şu haliyle.

.aw-slider
{
  width:800px;
  height:330px;
  overflow: hidden;
  position: relative;
}

Şimdi gösterilecek görsellerin boyutlarını ve yapısını belirleyeyim. Beraberinde de alt yazı açıklamalarını hazırlayalım.

.resim1, .resim2, .resim3, .resim4, .resim5
{
  position: absolute;
  width:800px;
  height:330px;
}

.aw-slider > div > a > span{
  position:absolute;
  display:table; 
  background-color:black; 
  color:white; 
  right:0; 
  bottom:0; 
  padding:5px 10px;
}

Her bir resim 800px boyutunda olduğu için slideların her biri için +800px’lik bir left vermemiz gerekiyor.

.resim1{left: 0;}
.resim2{left: 800px;}
.resim3{left: 1600px;}
.resim4{left: 2400px;}
.resim5{left: 3200px;}

Bütün bu yapıları içinde barındıracak ve animasyonu oluşturacak division öğesini tanımlayalım. Örnekte 5 adet görsel kullandık diye 20 saniyelik bir animasyon oluşturduk. Ayrıca 800×5 piksellik bir görsel sunumumuz olduğu için de bu alanda genişlik değerimiz 3200px olarak ayarlı kalmalı. Animasyonumuzun adı da gecisler.

.aw-slider > div 
{
  width: 3200px;
  height: 330px;
  left:0px;
  position: absolute;
  -webkit-animation-duration: 20s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-name: gecisler;
  -moz-animation-duration: 20s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-name: gecisler;
  -ms-animation-duration: 20s;
  -ms-animation-iteration-count:infinite;
  -ms-animation-name: gecisler;
  animation-duration: 20s;
  animation-iteration-count:infinite;
  animation-name: gecisler;
}

Resimlerin üzerine geldiğinde netlikleri artsın, animasyon ise dursun.

.aw-slider > div  img{
  opacity: 0.9;
  filter: alpha(opacity=95);
}

.aw-slider > div  img:hover{
  opacity: 1;
  filter: alpha(opacity=100);
}

.aw-slider > div:hover{
-webkit-animation-play-state:paused;
/* Bu CSS tanımı Chrome 4.0, IE10, Firefox 16, Safari 4, Opera 15 ve üstü versiyonlarda çalışmaktadır*/
}

Ve son olarak cross browser yapıda gecisler isimli animasyonumuzu tanımlayalım.

@-webkit-keyframes gecisler 
{
  0% {left:0px;}
  10% {left:0px;}
  20% {left:-800px;}
  30% {left:-800px;}
  40% {left:-1600px;}
  50% {left:-1600px;}
  60% {left:-2400px;}
  70% {left:-2400px;}
  80% {left:-3200px;}
  90% {left:-3200px;}
}
@-moz-keyframes gecisler 
{
  0% {left:0px;}
  10% {left:0px;}
  20% {left:-800px;}
  30% {left:-800px;}
  40% {left:-1600px;}
  50% {left:-1600px;}
  60% {left:-2400px;}
  70% {left:-2400px;}
  80% {left:-3200px;}
  90% {left:-3200px;}
}
@-ms-keyframes gecisler 
{
  0% {left:0px;}
  10% {left:0px;}
  20% {left:-800px;}
  30% {left:-800px;}
  40% {left:-1600px;}
  50% {left:-1600px;}
  60% {left:-2400px;}
  70% {left:-2400px;}
  80% {left:-3200px;}
  90% {left:-3200px;}
}
@keyframes gecisler 
{
  0% {left:0px;}
  10% {left:0px;}
  20% {left:-800px;}
  30% {left:-800px;}
  40% {left:-1600px;}
  50% {left:-1600px;}
  60% {left:-2400px;}
  70% {left:-2400px;}
  80% {left:-3200px;}
  90% {left:-3200px;}
}

JavaScript’in yükünü CSS sırtlayınca kodlar biraz uzuyor. Sırada HTML kodlarımız var.

Bu da ilginizi çekebilir  AdobeWordPress Gururla Sunar : Handy Slider Widget

HTML Kodları

Burada iş yükü çok az. Aşağıda biz bir köprü bağlantı kullanmadık ama siz slidelarınıza link verebilirsiniz.

<div class="aw-slider">
<div>
<a class="resim1"><img src="http://lorempixel.com/800/330/cats"><span>Kediler</span></a>
<a class="resim2"><img src="http://lorempixel.com/800/330/nightlife"><span>Gece Hayatı</span></a>
<a class="resim3"><img src="http://lorempixel.com/800/330/fashion"><span>Moda</span></a>
<a class="resim4"><img src="http://lorempixel.com/800/330/food"><span>Yemek</span></a>
<a class="resim5"><img src="http://lorempixel.com/800/330/technics"><span>Teknik</span></a>
</div>
</div>

Slide sayısını nasıl çoğaltırım?

Öncelikle HTML kodlarına yeni bir satır ekleyip sonraki numara ile isimlendirin (resim6). Daha sonra CSS tarafında bu yeni oluşturduğunuz görsele de ilgili classları tanımlayın. Animasyonunuzun olduğu kısma ise 0-90 arası uzanan sıralandırmayı her bir yeni slide için 2 satır daha arttırıp aradaki rakam farkını koruyun. Tabi şuan için 3200‘e ayarlı olan genişlik değerlerinizi de her bir resim için 800 piksel arttırmayı unutmayın.

CSS Slider

İlk bakışta uzun ve karmaşık bir makale gibi gözüküyor olabilir. Ancak web sayfanızın orta yerinde koca koca görselleri ziyaretçilere sunan bu tasarımların fonksiyonel ve hızlı çalışması gerekir. Sadece birkaç görsel hareket etsin, ilgi çeksin diye web sayfanıza onlarca CSS ve JavaScript dosyasını include ediyorsanız sayfa boyutunun epeyce artmasına sebep olursunuz.

Bir sonraki makalemizde görüşmek üzere, hoşçakalın.



  • Mississippi

    Tehdit edenlere söyle adres versinler. Biz hallederiz 😀

  • Lucky

    o eposta atanlardan biride bendim sanırım 🙂 Teşekkürler.

  • Ali YANAR

    Merhaba;
    Öncelikle emeğinize sağlık.
    Slider ‘i arrow butonları ile yönetmek için nasıl bir işlem yapmamız gerekiyor? Bunuda ekleyebilirseniz çok sevinirim.
    İyi Çalışmalar…

  • Eyvallah Reis 🙂

  • Memduh Biçer

    cok tesekkrler

  • Güzel anlatım olmuş

  • Ahmet

    Kod bozulmuş.

  • Musa

    Elinize Sağlık Faydalı Oldu Teşekkür Ederim..

  • Bilge Kanal

    Ahmet doğru söylüyor, kodda sıkıntı var. Slider her resim geçişinde 2 piksel soldan kayma yapıyor, son resmi ise görmüyor. 2 katı verdiğim değere +2 piksel eklesem de sorun devam etmekte. kodu tekrar gözden geçirirseniz sevinirim

  • Turqay

    men oldugu kimi yazdim slider olmadi her yeniledikce sekil gelir elece

  • Asena Çelik

    slider yapımında tıkladığında resimin açılması için hangi kdları kulanıyoruz?

  • Ecem Sever

    Toplamda 9 resmin olduğu bir slider yapacağım bu kodlar şuan çalışıyor ama dediğin gibi ekleme yaptığımda eklenenleri slidera dahil etsede geçişlerde göstermiyor. 9 taneli olanını yapıp paylaşabilir misin Teşekkürler