Minik bir slayt çalışması

minikslayt

minikslayt

Sadece Css  kullanılarak hazırlanmış minik  bir Css3 slayt galeri örneği.  Css3 slayt galeri örneği sidebar  bölümüne yerleşecek kadar küçük boyutta olduğu için sitenizin herhangi bir  bölümüne  yerleştirebilirsiniz. Slayt galeri çerçevesini  biraz  daha genişleterek  websitenizin manşet bölümlerinde kullanıma  gayet uygun olur.  Resimler  arası geçiş için kullanılan rakamlara tıkladığınızda  konuma  göre  soldan sağa yada  sağdan sola  doğru slayt olarak değişiyor. Sadece  slayt  geçiş  özelliği  bulunan  bu Css3  galeri örneğindeki  slayt geçiş  efektlerini  değiştirmek istiyorsanız  eğer  şuradaki yazıdan diğer Css3  geçiş  efektlerini inceleyebilirsiniz.  Sadece Css kodları değiştirerek kolaylıka  farklı efektler  ekleyebilirsiniz.

 

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölüm.

Css :

html {
 width: 100%;
 height: 100%;
}
body { 
 display: -moz-box;
 -moz-box-orient: vertical;
 -moz-box-align: center;
 -moz-box-pack: center;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-box-align: center;
 -webkit-box-pack: center;
 width: 100%;
 height: 100%;
 margin: 0;
 background: -moz-linear-gradient(top, #777, #444);
 background: -webkit-linear-gradient(top, #777, #444);
}
ul,menu,li {
 list-style: none;
 padding: 0;
 margin: 0;
}
input {
 display: none;
}
#container {
 width: 400px;
 height: 400px;
 margin: 0;
 padding: 10px;
 background: #fff;
 -moz-box-shadow: 0 1px 0 #999, 0 5px 12px rgba(0,0,0,0.9);
 box-shadow: 0 1px 0 #999, 0 5px 12px rgba(0,0,0,0.9);
 border-radius: 3px;
}
#slider {
 display: block;
 overflow: hidden;
 width: 400px;
 height: 370px;
 background: #222;
 -moz-box-shadow: inset 0 1px 7px rgba(0,0,0,1);
 box-shadow: inset 0 1px 7px rgba(0,0,0,1);
 border-radius: 3px;
}
#slider .inner {
 display: -moz-box;
 -moz-transition: 0.5s ease-out;
 display: -webkit-box;
 -webkit-transition: 0.5s ease-out;
}
#slider .inner li {
 display: -moz-box;
 -moz-box-align: center;
 -moz-box-pack: center;
 display: -webkit-box;
 -webkit-box-align: center;
 -webkit-box-pack: center;
 width: 400px;
 height: 370px;
 overflow: hidden;
 text-align: center;
 vertical-align: middle;
}
#slider .inner li img {
 max-width: 400px;
 max-height: 370px;
 width: auto;
 height: auto;
}
#slider-controler {
 display: -moz-box;
 -moz-box-align: center;
 -moz-box-pack: center;
 display: -webkit-box;
 -webkit-box-align: center;
 -webkit-box-pack: center;
 width: 400px;
 height: 30px;
}
#slider-controler li {
 margin: 10px 3px 0;
}
#slider-controler li label {
 display: block;
 width: 20px;
 height: 17px;
 padding-top: 3px;
 background: #ddd;
 text-align: center;
 line-height: 1;
 font-size: 14px;
 color: #aaa;
}
#container #slider-controler li label:hover {
 background: #666;
 color: #fff;
 cursor: pointer;
}
input#image1:checked ~ #slider .inner {-moz-transform: translatex(0px);-webkit-transform: translatex(0px);}
input#image2:checked ~ #slider .inner {-moz-transform: translatex(-400px);-webkit-transform: translatex(-400px);}
input#image3:checked ~ #slider .inner {-moz-transform: translatex(-800px);-webkit-transform: translatex(-800px);}
input#image4:checked ~ #slider .inner {-moz-transform: translatex(-1200px);-webkit-transform: translatex(-1200px);}
input#image5:checked ~ #slider .inner {-moz-transform: translatex(-1600px);-webkit-transform: translatex(-1600px);}
input#image6:checked ~ #slider .inner {-moz-transform: translatex(-2000px);-webkit-transform: translatex(-2000px);}
input#image1:checked ~ #slider-controler li label[for='image1'],
input#image2:checked ~ #slider-controler li label[for='image2'],
input#image3:checked ~ #slider-controler li label[for='image3'],
input#image4:checked ~ #slider-controler li label[for='image4'],
input#image5:checked ~ #slider-controler li label[for='image5'],
input#image6:checked ~ #slider-controler li label[for='image6'] {
 background: #ff8e00;
 color: #fff;
}

 

 

  • Body etiketleri arasına eklemeniz  gereken bölüm.

Html :

<div id="container">
<input type="radio" name="slider-radio" id="image1" checked="checked" />
<input type="radio" name="slider-radio" id="image2" />
<input type="radio" name="slider-radio" id="image3" />
<input type="radio" name="slider-radio" id="image4" />
<input type="radio" name="slider-radio" id="image5" />
<input type="radio" name="slider-radio" id="image6" />
<div id="slider">
 <ul class="inner">
 <li><a href="http://mintik.com/?p=14360"><img src="http://lorempixel.com/400/370/sports/1" /></a></li>
 <li><a href="http://mintik.com/?p=14360"><img src="http://lorempixel.com/400/370/sports/2" /></a></li>
 <li><a href="http://mintik.com/?p=14360"><img src="http://lorempixel.com/400/370/sports/3" /></a></li>
 <li><a href="http://mintik.com/?p=14360"><img src="http://lorempixel.com/400/370/sports/4" /></a></li>
 <li><a href="http://mintik.com/?p=14360"><img src="http://lorempixel.com/400/370/sports/5" /></a></li>
 <li><a href="http://mintik.com/?p=14360"><img src="http://lorempixel.com/400/370/sports/6" /></a></li>
 </ul>
</div>
<menu id="slider-controler">
 <li><label for="image1">1</label></li>
 <li><label for="image2">2</label></li>
 <li><label for="image3">3</label></li>
 <li><label for="image4">4</label></li>
 <li><label for="image5">5</label></li>
 <li><label for="image6">6</label></li>
</menu>
</div>

 

0 Comments

Leave a Comment