Lưu ý khi slideshow đang được trình chiếu tự động, bạn bấm một trong các thẻ phía dưới sẽ làm mất đi chế độ autostart của slideshow...
Mời các bạn bấm vào Xem thử phía dưới để xem trước slideshow này nha.
Bạn chỉ việc đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML/Javacript (nếu bạn chưa biết các thêm HTML/Javacript thì mời bạn xem TẠI ĐÂY). Sau đó copy tất các code phía dưới dán vào.
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/66348944/thunghiem/carddeckslideshow.css" />
<style>
.stackcontainer{
margin: 10px 0 0px 0;
}
#demo1{
width: 240px;
height: 320px;
margin-left: 210px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/66348944/thunghiem/carddeckslideshow.js">
</script>
<script>
var demo1 = new carddeckslideshow({
id: 'demo1',
autoplay: true,
cycles: 2,
persist: false
})
</script>
<div id="demo1" class="stackcontainer">
<div class="inner">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHAnifH0Rl1xj3oaOHLoTFZHvxDSrHEzwPy24jaZc6PNtlzLlOV3Dv3C0Eqf_bU067lPQPTho-2Doyy4HOM2TIPDChkQJWu8x6clZ6FXTphFbuXqWAWcpzJVRvoejhlnPpIn7jdkCZ3z8/s1600/0024.gif" />
</div>
<div class="inner">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEittqYKm73bKQgLG0ciAjvG3JKLBB8vLC5GPCh8Dpi0nVA3z3CVYshDYjHdMBujKf7EJDFACotHz08dkBhwO5PcDHYxPUPM3jcFYmRAd68E5Nj5BOjsS-SW4fDqCtEoB3jlkzN6HY7F7Lk/s1600/0055.gif" />
</div>
<div class="inner">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKbdDrgy9qITCVF1dZ-RcKtKB2QGYBFBIYqj2olC_EYbMyDANOKQerX1txJs0nfdYrloQLiXWazrRIk10uHzIFaQvRDfHkHnGlCCFPJctAuRiyGscuo-NdAy7PekWUlvrP7Bk029UyHXM/s1600/0013.gif" />
</div>
<div class="inner">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh100xKoMLL4Rk2SxN9XZfB9bwEYNe3YEhncLoWyI9xho2MWDbLkUaTlA5GCZbFD6AxMtbcyJbVHp97PigEkomos1wjlqYe_KRUxY-ZwRQce-8ghZISKoDqDMg4gGWJrwAmlo9QvrJOcEQ/s1600/0015.gif" />
</div>
<div class="inner">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigjSFEQmD1flBhAzie2Iy9fN_q2c-ftpR4OOqb2G-UlmiwDqli257OC3i6tAACiHWUtZBpk3osXYkD0DTX_dUxxK5h7Hav19x3bxkxucg7t8Mui2r6OWVqy1xQBwPAO-NaUhOapEhySwY/s1600/0014.gif" />
</div>
<div class="inner">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkyzf1SjArpPCgqg2HkQXEjXFwLhIA1UqUhxQYUGL48iNKToBgU7rUg-AjwGm8f7-xjr06G9-YmEiJ9JDZXajF-mKyNy5Hkh1fRHOjvrYb2dG8hNWADkTEKjs3ahlIMk5n3d91kkyHtL0/s1600/0019.gif" />
</div>
<div class="inner">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4sOTY4DNCOtYSEWFLJB7jLSdhY9r5dVfRWwUK3OwgFiWT5atKtS-3Hsp1ahyOfltW1hJr98WzI-v2ZLgTqIDb9p4mwO-dbfzLYVwwUGr_RNM2QcaicDhd2n92TpJbyAZP800vTnJaOAQu/s1600/0035.gif" />
</div>
</div>
<div style="margin-top:1em; margin-left:250px">
<a href="javascript:demo1.navigate('prev')">Previous Slide</a> / <a href="javascript:demo1.navigate('next')">Next Slide</a> / <a href="javascript: demo1.userpause()">Stop</a>
</div>
Bây giờ, bạn có thể thay đổi các dòng lệnh màu đỏ, trong đó:
Width: chiều rộng của khung trình chiếu
Height: chiều cao của khung trình chiếu
Margin-left: khoảng cách từ lề trái đến khung trình chiếu (khoảng cách này nếu bạn để ngắn quá thì hiệu ứng rơi ảnh sẽ không được đẹp).
Và các dòng lệnh màu xanh là link ảnh.
Cuối cùng bấm Lưu là xong.
Ở code trên tôi làm 7 ảnh, nếu bạn muốn nhiều ảnh hơn nữa thì dán đoạn code:
<img src="link ảnh" />
</div>
lên phía trên thẻ đóng </div> cuối cùng.
Để slideshow được đẹp, bạn nên resize các ảnh có cùng kích thước với khung trình chiếu.
Chúc bạn thành công
