Slide KIỂU LỊCH RƠI

Thứ Hai, 6 tháng 10, 2014

Số lượt xem bài này:

Slide KIỂU LỊCH RƠI

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

#demo1{
width: 450px; 
height: 400px; 
margin-left: 210px;
}
</style>

</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>

 
</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 vaod 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

- Điiề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 !

Đăng nhận xét

1- Nhận xét chỉ nên liên quan đến bài đăng, phải có tính chất xây dựng và có văn hóa !
2- Để chèn biểu tượng cảm xúc vào nhận xét, các bạn nhập các ký hiệu bên dưới của hình vào phần viết nhận xét.
3- Việc nhập tài khoản Google của bạn và nhập 2 từ xác minh trước lúc gửi nhận xét là bắt buộc !
4- Các bạn có thể chèn Video trên Youtube hay ảnh bằng cách dán link của video (trên thanh địa chỉ) hay link ảnh trực tiếp ở khung soạn thảo nhận xét !
5-Các bạn có thể post code trong nhận xét nhưng phải mã hóa code trước ! Để mã hóa code các bạn vào đây

Thứ Hai, 6 tháng 10, 2014