Membuat CSS3 Image Slider With Stylized Thumbnails

HaiSob, apa kabar lagi? Baiklah sobat pada kesempatan ini haisob.com akan membagikan sebuah slider gambar untuk kamu, yaitu CSS3 Image Slider With Stylized Thumbnails.

Sebelumnya juga saya telah membagikan cara membuat Slider Accordian Style dengan CSS3 dan cara membuat image Slider with Control Button. Nah, berikut adalah cara membuat CSS3 Image Slider With Stylized Thumbnails.

CSS3 Image Slider With Stylized Thumbnails


CSS3 Image Slider With Stylized Thumbnails
CSS3 Image Slider With Stylized Thumbnails

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>

Oh ya, lebar gambar harus sesuai dengan lebar slider dimana diatas lebar slider adalah 640 px. Silahkan di ganti gambar-gambarnya dan edit sesuka kamu.




Sekian, semoga bermanfaat.