CSS3 image slider với định dạng thumbnails

Image Slider luôn luôn là một trong những chức năng cần có trong một website. Ngoài việc làm cho giao diện web đẹp và sinh động hơn, thì những hình ảnh sẽ là cách tuyệt vời nhất trong việc chuyển tải thông điệp của website đến cho khách viếng thăm.

Xem Demo | Download

Trong bài viết này, mình sẽ chia sẻ cho các bạn thêm một hiệu ứng image slider được làm bằng CSS3 với hiệu ứng fade-in-out.

HTML

Chúng ta sẽ tạo một slider với ảnh thumbnails được đặt nằm bên trên thẻ radio inputs để phát hiện sự kiện click.

CSS

Và đây là toàn bộ đoạn css giúp các bạn tạo một slide hình ảnh như sau :

.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: 100px 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);
}