Code Tạo SlideShow Ảnh-kiểu 5

Đây là slideshow trình chiếu ảnh hoàn toàn sử dụng CSS3 nên không hề ảnh hưởng tới tốc độ load trang.Slider này tích hợp phần chú thích cho ảnh hay gọi là đặt tên cho ảnh cũng được.

Sự dịch chuyển ảnh cũng mượt mà tuy không da dạng hiệu ứng như sử dụng jquery nhưng cũng đáp ứng được việc trình chiếu ảnh của bạn nào không đòi hỏi cao về hiệu ứng ^^

Xem thử:

DEMO

Cài đặt slider cho blogger

Để cài đặt slider này ta cần tiến hành thêm 1 tiện ích hoặc nếu để nó trong bài viết thì dán code vào bên HTML
Code:

<style type="text/css">
.slides {
height:300px;
margin:50px auto;
overflow:hidden;
position:relative;
width:600px;
}
.slides ul {
list-style:none;
position:relative;
}
/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
0% {opacity:0;}
6% {opacity:1;}
24% {opacity:1;}
30% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes anim_slides {
0% {opacity:0;}
6% {opacity:1;}
24% {opacity:1;}
30% {opacity:0;}
100% {opacity:0;}
}
.slides ul li {
opacity:0;
position:absolute;
top:0;
/* css3 animation */
-webkit-animation-name: anim_slides;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_slides;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;

-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}
/* css3 delays */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
-webkit-animation-delay: 18.0s;
-moz-animation-delay: 18.0s;
}
.slides ul li img {
display:block;
}
/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
0% {left:100%;
opacity:0;}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
@-moz-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
.slides ul li div {
background-color:#000000;
border-radius:10px 10px 10px 10px;
box-shadow:0 0 5px #FFFFFF inset;
color:#FFFFFF;
font-size:26px;
left:10%;
margin:0 auto;
padding:20px;
position:absolute;
top:50%;
width:200px;

/* css3 animation www.bloggertrix.com*/
-webkit-animation-name: anim_titles;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_titles;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}</style>
<div class="slides">
<ul> <!-- slides -->
<li><img src="http://2.bp.blogspot.com/-y601bZlOrTY/UMlNLI19xlI/AAAAAAAAF6c/gEhYi1QAB5E/s1600/bloggertrix-pic1.jpg" alt="image01" />
<div>Title 1</div>//Chú thích
</li>
<li><img src="http://1.bp.blogspot.com/-uaVXxxiuKFQ/UMlNMHYksDI/AAAAAAAAF6g/4A9waR5guL0/s1600/bloggertrix-pic2.jpg" alt="image02" />
<div>Title 2</div>//Chú thích
</li>
<li><img src="http://1.bp.blogspot.com/-Z3K_KI1Ji3o/UMlNMy6bvZI/AAAAAAAAF6o/dfKEEnstXTM/s1600/bloggertrix-pic3.jpg" alt="image03" />
<div>Title 3</div>//Chú thích
</li>
<li><img src="http://4.bp.blogspot.com/-qKUVh1bbZnQ/UMlNNk8DSzI/AAAAAAAAF6w/-OmZOb-QlWY/s1600/bloggertrix-pic4.jpg" alt="image04" />
<div>Title 4</div>//Chú thích
</li>
</ul>
</div>

Bạn thay link ảnh của bạn vào và thêm chú thích cho ảnh