Minik bir slayt çalışması

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.

Download

Demo

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="https://www.mintik.com/?p=14360"><img src="https://lorempixel.com/400/370/sports/1" /></a></li>
 <li><a href="https://www.mintik.com/?p=14360"><img src="https://lorempixel.com/400/370/sports/2" /></a></li>
 <li><a href="https://www.mintik.com/?p=14360"><img src="https://lorempixel.com/400/370/sports/3" /></a></li>
 <li><a href="https://www.mintik.com/?p=14360"><img src="https://lorempixel.com/400/370/sports/4" /></a></li>
 <li><a href="https://www.mintik.com/?p=14360"><img src="https://lorempixel.com/400/370/sports/5" /></a></li>
 <li><a href="https://www.mintik.com/?p=14360"><img src="https://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>