Cara Membuat Image Slider With Stylized Thumbnails

Baiklah sobat pada kesempatan ini seocips.com kembali akan membagikan sebuah slider gambar untuk anda. Sebelumnya juga saya telah membagikan Cara Membuat Slider Accordian Style dengan CSS3 dan untuk saat ini adalah cara Membuat Image Slider With Stylized Thumbnails. Untuk lebih jelasnya lagi sobat dapat melihat demonya di bawah ini.



Nah jika sudah puas melihat demonya berikut ini adalah kodenya:

HTML-JS-CSS

<div class="slider">
<input type="radio" name="slide_switch" id="id1"/>
<label for="id1">
<img src="http://3.bp.blogspot.com/-XK6s-yOHyjQ/VVJGpYJ5wJI/AAAAAAAAEuk/DBUGF9uzTh4/s100/seocips1.jpg" width="100"/>
</label>
<img src="http://3.bp.blogspot.com/-XK6s-yOHyjQ/VVJGpYJ5wJI/AAAAAAAAEuk/DBUGF9uzTh4/s1600/seocips1.jpg"/>
<input type="radio" name="slide_switch" id="id2" checked="checked"/>
<label for="id2">
<img src="http://4.bp.blogspot.com/-s3jZBAeeYGU/VVJGp0uqRyI/AAAAAAAAEuo/2R4aur9Cq-g/s100/seocips2.jpg" width="100"/>
</label>
<img src="http://4.bp.blogspot.com/-s3jZBAeeYGU/VVJGp0uqRyI/AAAAAAAAEuo/2R4aur9Cq-g/s1600/seocips2.jpg"/>
<input type="radio" name="slide_switch" id="id3"/>
<label for="id3">
<img src="http://3.bp.blogspot.com/-BISdMF0KVgo/VVJGylKjU7I/AAAAAAAAEu4/NYGW197P1f0/s100/seocips3.jpg" width="100"/>
</label>
<img src="http://3.bp.blogspot.com/-BISdMF0KVgo/VVJGylKjU7I/AAAAAAAAEu4/NYGW197P1f0/s1600/seocips3.jpg"/>
<input type="radio" name="slide_switch" id="id4"/>
<label for="id4">
<img src="http://1.bp.blogspot.com/-qB5qUatCkyU/VVJG1QZnd8I/AAAAAAAAEu8/ah_oyISs92Y/s100/seocips4.jpg" width="100"/>
</label>
<img src="http://1.bp.blogspot.com/-qB5qUatCkyU/VVJG1QZnd8I/AAAAAAAAEu8/ah_oyISs92Y/s1600/seocips4.jpg"/>
<input type="radio" name="slide_switch" id="id5"/>
<label for="id5">
<img src="http://2.bp.blogspot.com/-b-cPjmfQJzs/VVJGvPtdPyI/AAAAAAAAEu0/yKrlBiNSqVg/s100/seocips5.jpg" width="100"/>
</label>
<img src="http://2.bp.blogspot.com/-b-cPjmfQJzs/VVJGvPtdPyI/AAAAAAAAEu0/yKrlBiNSqVg/s1600/seocips5.jpg"/>
</div>
<script src="https://sites.google.com/site/seocips/seocips-script/prefixfree.js" type="text/javascript"></script>
<style>
body {background: #333;}
.slider{
width: 640px; /*Same as width of the large image*/
position: relative;
/*Instead of height we will use padding*/
padding-top: 320px; /*That helps bring the labels down*/
margin: 10px auto;
/*Lets add a shadow*/
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
/*Last thing remaining is to add transitions*/
.slider>img{
position: absolute;
left: 0; top: 0;
transition: all 0.5s;
}
.slider input[name='slide_switch'] {
display: none;
}
.slider label {
/*Lets add some spacing for the thumbnails*/
margin: 18px 0 0 18px;
border: 3px solid #999;
float: left;
cursor: pointer;
transition: all 0.5s;
/*Default style = low opacity*/
opacity: 0.6;
}
.slider label img{
display: block;
}
/*Time to add the click effects*/
.slider input[name='slide_switch']:checked+label {
border-color: #666;
opacity: 1;
}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.slider input[name='slide_switch'] ~ img {
opacity: 0;
transform: scale(1.1);
}
/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.slider input[name='slide_switch']:checked+label+img {
opacity: 1;
transform: scale(1);
}
</style>

Ingat lebar gambar harus sesuai dengan lebar slider dimana diatas lebar slider adalah 640 px. Silahkan di ganti gambar-gambarnya dan edit sesuka anda.
Sekian dan semoga bermanfaat.
0 Komentar untuk "Membuat CSS3 Image Slider Stylized Thumbnails"