Tạo Slide kiểu rơi ảnh

Trước kia tôi đã có 2 bài về làm slideshow với code HTML

1- Làm Slideshow có chú thich với code HTML cho Blog

2- Làm Slideshow với HTML không có chú thich cho Blog

   Hôm nay tôi chia sẽ với các bạn cách làm slideshow với code HTML KIỂU LỊCH RƠI. Các bạn có thể xem DEMO dưới đây:
( Mở ra nó sẽ tự chơi 4 lần rồi dừng lại ! Nếu bạn muốn xem từng ánh một hãy kích thủ công vào ẢNH SAU hay ẢNH TRƯỚC tùy bạn !)

ẢNH TRƯỚC / ẢNH SAU / DỪNG

Đây là đoạn code mẫu để làm slide theo kiểu này

<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/66348944/thunghiem/carddeckslideshow.css" /> <style> .stackcontainer{ margin: 10px 0 0px 0; } #demo1{ width: 450px; <!-- các bạn có thể thay đổi để phù hợp với kích cở ảnh của mình --> height: 400px; <!-- các bạn có thể thay đổi để phù hợp với kích cở ảnh của mình --> 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: 4, persist: false }) </script> <div id="demo1" class="stackcontainer"> <div class="inner"> <img src="LINK ẢNH 1" /> </div> <div class="inner"> <img src="LINK ẢNH 2" /> </div> <div class="inner"> <img src="LINK ẢNH 2" /> </div> <!-- Muốn thêm bao nhiêu ảnh thì các bạn thêm bấy nhiêu đoạn code dưới đây vào sau dòng tôi hướng dẫn này: <div class="inner"> <img src="LINK ẢNH " /> </div> --> </div> <div style="margin-top:1em; margin-left:300px"> <a href="javascript:demo1.navigate('prev')">ẢNH TRƯỚC</a> / <a href="javascript:demo1.navigate('next')">ẢNH SAU</a> / <a href="javascript: demo1.userpause()">DỪNG</a> </div>

Các bạn hãy copy đoạn code mẫu này và dán vào NOTEPAD để chỉnh sứa:
-Thêm số lượng ảnh mình muốn làm slide vào code mẫu này
- Điều chỉnh độ lớn khung trình chiếu phù hợp vớ độ lớn các ảnh của bạn
Sau đấy bạn coppy code đã chỉnh sửa và dán vào trong giao diện soạn thảo bài viết ở nơi mà bạn muốn slide xuất hiện thế là OK.

Để cho Slide như ý mình thì phải chỉnh sửa CSS và JS trong đoạn code mẫu này ! Điều này chỉ dành cho các bạn am hiểu kha khá về HTML thôi. Còn không các bạn cứ dùng đoạn code mmẫu tôi đã cho trên là cũng tạm ổn rồi !

Lưu ý: Là trước lúc làm slide các ảnh mà các bạn định đưa vào phải được tải lên một host ảnh (như Photobucket, DropBox...) để có link chèn vào code mẫu và các ảnh phải có cùng kích thước thì slide mới đẹp !

Source from (Nguồn bài đăng): minh lương và mọi người