css3

-- CSS3 & HTML5

CSS ile Slider Yapımı

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.Blog`umda Lorem pixel ile ilgini yazımda mevcut.

 Lorempixel ile Rastgele Görsel

<div id="slider-wrapper">
    <div class="slider">
        <a class="img-bir">
            <img src="http://lorempixel.com/700/400/">
            <span>Kategori</span>
         </a>
        <a class="img-iki">
                <img src="http://lorempixel.com/700/400/">
            <span>Kategori</span>
        </a>
        <a class="img-uc">
            <img src="http://lorempixel.com/700/400/">
            <span>Kategori</span>
        </a>
        <a class="img-dort">
            <img src="http://lorempixel.com/700/400/">
            <span>Kategori</span>
        </a>
        <a class="img-bes">
            <img src="http://lorempixel.com/700/400/">
            <span>Kategori</span>
        </a>
     </div>
</div>

 

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

#slider-wrapper{
  position: relative;
  width:700px;
  height:400px;
  overflow: hidden;
}

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

.img-bir, .img-iki, .img-uc, .img-dort,.img-bes{
  position: absolute;
  width:700px;
  height:400px;
}

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

.img-bir{left: 0px;}
.img-iki{left: 700px;}
.img-uc{left: 1400px;}
.img-dort{left: 2100px;}
.img-bes{left: 2800px;}

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

#slider-wrapper > .slider{
  position: absolute;
  left:0px;
  width: 2800px;
  height: 400px;
  -webkit-animation-duration: 15s;
  -webkit-animation-name: sliders;
  -webkit-animation-iteration-count:infinite;
  -moz-animation-duration: 15s;
  -moz-animation-name: sliders;
  -moz-animation-iteration-count:infinite;
  -ms-animation-duration: 15s;
  -ms-animation-name: sliders;
  -ms-animation-iteration-count:infinite;
  animation-duration: 15s;
  animation-iteration-count:infinite;

}

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

#slider-wrapper > .slider:hover{
-webkit-animation-play-state:paused;
}

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

#slider-wrapper > .slider > a > span{
  position:absolute;
  background:#333;
  color:white;
  left:0;
  top:80%;
  padding:8px 22px;
  display:table;
}
#slider-wrapper a{
   font-size:18px;
   font-family:Arial;
}

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 ?

@-webkit-keyframes sliders{
  0% {left:0px;}
  10% {left:0px;}
  20% {left:-700px;}
  30% {left:-700px;}
  40% {left:-1400px;}
  50% {left:-1400px;}
  60% {left:-2100px;}
  70% {left:-2100px;}
  80% {left:-2800px;}
  90% {left:-2800px;}
}
@-moz-keyframes sliders{
  0% {left:0px;}
  10% {left:0px;}
  20% {left:-700px;}
  30% {left:-700px;}
  40% {left:-1400px;}
  50% {left:-1400px;}
  60% {left:-2100px;}
  70% {left:-2100px;}
  80% {left:-2800px;}
  90% {left:-2800px;}
}
@-ms-keyframes sliders {
  0% {left:0px;}
  10% {left:0px;}
  20% {left:-700px;}
  30% {left:-700px;}
  40% {left:-1400px;}
  50% {left:-1400px;}
  60% {left:-2100px;}
  70% {left:-2100px;}
  80% {left:-2800px;}
  90% {left:-2800px;}
}
@keyframes sliders{
  0% {left:0px;}
  10% {left:0px;}
  20% {left:-700px;}
  30% {left:-700px;}
  40% {left:-1400px;}
  50% {left:-1400px;}
  60% {left:-2100px;}
  70% {left:-2100px;}
  80% {left:-2800px;}
  90% {left:-2800px;}
}

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