Cách tạo Slideshow hình ảnh bằng CSS cho Blogspot


Trong bài viết này, mình sẽ hướng dẫn cách bạn tạo Slideshow hình ảnh cực đơn giản chỉ bằng CSS cho nên không ảnh hưởng đến tốc độ tải trang của bạn.

Thủ thuật này rất có ích với những trang chứa nhiều hình ảnh mà muốn gom lại cho gọn hay muốn trình diễn những tấm ảnh đẹp cho người xem.

Tuy nhiên, nhược điểm mà mình cảm thấy lớn nhất của thủ thuật này là không có nút bấm chuyển giữa các tấm hình. Tuy nhiên, nếu có thể bỏ qua được thì thủ thuật này hết sức tuyệt vời.

Mình có áp dụng trong bài viết này, bạn hãy nhìn vào Slideshow ở trên để hiểu được thủ thuật này hoạt động như thế nào nhé!

Bây giờ, chúng ta cùng bắt đầu thực hiện nào.

Slideshow hình ảnh bằng CSS

Bước 1. Đăng nhập tài khoản Blogger > Chủ đề > Chỉnh sửa HTML.

Bước 2. Sao chép đoạn mã CSS dưới đây và dán vào trước thẻ đóng ]]></b:skin>.

.slideshow-imgs {width:100%; height:400px; position:relative; overflow:hidden}
.slideshow-imgs .css-imgs {max-width:100%; position:absolute; left:0; right:0; opacity:0; -webkit-animation:slideshow-imgs-fade 15s linear infinite; -moz-animation:slideshow-imgs-fade 15s linear infinite; -ms-animation:slideshow-imgs-fade 15s linear infinite; animation:slideshow-imgs-fade 15s linear infinite}
.slideshow-imgs .css-imgs:nth-child(2) {-webkit-animation-delay:5s; -moz-animation-delay:5s; -ms-animation-delay:5s; animation-delay:5s}
.slideshow-imgs .css-imgs:nth-child(3) {-webkit-animation-delay:10s; -moz-animation-delay:10s; -ms-animation-delay:10s; animation-delay:10s}
@-webkit-keyframes slideshow-imgs-fade {0%, 50%, 100% {opacity:0} 5%, 45% { opacity:1}}
@-moz-keyframes slideshow-imgs-fade {0%, 50%, 100% {opacity:0} 5%, 45% { opacity:1}}
@-ms-keyframes slideshow-imgs-fade {0%, 50%, 100% {opacity:0} 5%, 45% { opacity:1}}
@keyframes slideshow-imgs-fade {0%, 50%, 100% {opacity:0} 5%, 45% { opacity:1}}

Bước 3. Nhấn nút Lưu chủ đề để hoàn tất.

Bây giờ, bạn chỉ cần chép đoạn mã HTML hiển thị dưới đây vào nơi mà bạn muốn hiển thị.

<div class="slideshow-imgs">
<img class="css-imgs" src="link-anh-so-1" />
<img class="css-imgs" src="link-anh-so-2" />
<img class="css-imgs" src="link-anh-so-3" />
</div>

Một số điểm cần chú ý

Ở đây, mình sử dụng 3 tấm ảnh để làm slideshow, nếu bạn muốn nhiều ảnh hơn thì hãy thêm các phần tử ở trong CSS và HTML cho tương ứng.

Ví dụ, nếu bạn có 6 tấm ảnh thì hãy thêm các mã CSS tương ứng (hãy xem CSS gốc để làm mẫu theo).

.slideshow-imgs .css-imgs:nth-child(4)...
.slideshow-imgs .css-imgs:nth-child(5)...
.slideshow-imgs .css-imgs:nth-child(6)...

Tiếp đến, ở đây mình thiết lập cho toàn slideshow là 15s, tương ứng với mỗi tấm hình là 5s. Mỗi tấm ảnh sẽ ứng với bao nhiêu giây để hiện ra và ẩn đi. Do đó, bạn hãy chú ý kỹ trong CSS để hiểu hơn về nguyên tắc hoạt động của thủ thuật này để có thể thay đổi theo ý muốn.

Chúc bạn thành công!