CSS3 Image Slider Với định Dạng Thumbnails - Thủ Thuật Web

CSS3 image slider với định dạng thumbnails 26/04/2014 webmaster

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.

<div class="slider"> <input type="radio" name="slide_switch" id="id1"/> <label for="id1"> <img src="images/3yiC6Yq.jpg" width="100"/> </label> <img src="images/3yiC6Yq.jpg"/> <!--Lets show the second image by default on page load--> <input type="radio" name="slide_switch" id="id2" checked="checked"/> <label for="id2"> <img src="images/40Ly3VB.jpg" width="100"/> </label> <img src="images/40Ly3VB.jpg"/> <input type="radio" name="slide_switch" id="id3"/> <label for="id3"> <img src="images/00kih8g.jpg" width="100"/> </label> <img src="images/00kih8g.jpg"/> <input type="radio" name="slide_switch" id="id4"/> <label for="id4"> <img src="images/2rT2vdx.jpg" width="100"/> </label> <img src="images/2rT2vdx.jpg"/> <input type="radio" name="slide_switch" id="id5"/> <label for="id5"> <img src="images/8k3N3EL.jpg" width="100"/> </label> <img src="images/8k3N3EL.jpg"/> </div>

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); }

Thế là xong rồi đó các bạn, mình mong là qua bài viết này, các bạn sẽ có thêm một lựa chọn trong việc tạo các slider ảnh cho trang web hay blog của mình. Nếu có gì thắc mắc thì đừng ngần ngại để lại lời nhắn dưới dạng comment nhé.

Các bài viết tham khảo nếu các bạn muốn có thêm lựa chọn :

Tạo Flyout Image Slider với jQuery & CSS3.

Tạo Image Content Slider với chỉ CSS3

Image Carousel Slider

24 jQuery image galleries và slideshow plugins

Tags: css3 image slider

Chuyên Mục: Css

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !

Chia sẻ cho bạn bè

Tweet

Cùng Danh Mục

• Học CSS3 qua việc thiết kế logo Cloud9 IDE
• Tạo loader bằng CSS cực chuẩn
• Download Progress Bar với CSS3 và jQuery
• Tạo mẫu flat checkbox animation với CSS3
• Tập thiết kế logo bằng CSS3 với logo CBS
• Hiệu ứng tooltips cực đỉnh với CSS3
• Tạo hiệu ứng động 3D với CSS3
• Christmas Button – Mẫu button cho mùa giáng sinh
• Thiết kế sliding tags cho web với CSS3
• Tạo Photo Gallery với AngularJS và CSS3