Sadece CSS3 Kullanarak Slider Oluşturma

Merhaba arkadaşlar, CSS bilgimi gün geçtikçe geliştiriyorum. Bugün sizlere sadece CSS3 kullanarak nasıl slider oluştururuz onu anlatmaya çalışacağım. Artık jQuery ve JS'ye ihtiyaç duymadan CSS bilgimiz ile güzel bir slider yapalım :)

CSS

#images {
  width: 650px;
  height: 250px;
  position: relative;
  margin: 30px auto;
}
#images img {
  width: 650px;
  height: 250px;
  border:10px solid #CCC;
  position: absolute;
  top: 0;
  left: -400px;
  z-index: 1;
  opacity: 0;
  
  transition: all linear 500ms;
  -o-transition: all linear 500ms;
  -moz-transition: all linear 500ms;
  -webkit-transition: all linear 500ms;
}
#images img:target {
  left: 0;
  z-index: 9;
  opacity: 1;
}
#images img:first-child {
  left: 0;
  opacity: 1;
}
#slider a {
  text-decoration: none;
  background: #666;
  border: 1px solid #000;
  padding: 4px 8px;
  color: #FFF;
  border-radius:30px 30px 30px 30px
}
#slider a:hover {
  background: #FFF;
  color:#000;
  -webkit-transition: color 0.8s;
   -moz-transition: color 0.8s;
   -o-transition: color 0.8s;
   transition: color 0.8s;
}

HTML

<div id="images">
  <img id="image1" src="http://i.imgur.com/dL3io.jpg" />
  <img id="image2" src="http://i.imgur.com/qASVX.jpg" />
  <img id="image3" src="http://i.imgur.com/fLuHO.jpg" />
  <img id="image4" src="http://i.imgur.com/5Sd3Q.jpg" />
</div>
<div id="slider">
  <a href="#image1">1</a>
  <a href="#image2">2</a>
  <a href="#image3">3</a>
  <a href="#image4">4</a>
</div>

Canlı Önizleme


Arkadaşlar biliyorum şu resim geçişleri kısmı hiç hoş değil ^^