Trong hướng dẫn này, mình sẽ sử dụng jQuery với Plugin jCarousel để hiển thị slide các hình nhỏ và chú thích. Hình thu nhỏ có thể được cuộn với việc sử dụng các nút trước và sau khi bất kỳ hình ảnh thu nhỏ, các chú thích hoặc tiêu đề của hình nhỏ sẽ trượt lên.
Demo: Các bạn tải về chạy file index.html để xem trước slide.
Để thao tác bạn làm như sau:
4. Đặt đoạn mã sau vào thẻ <head> để khởi tạo jCarousel.
5. Đặt đoạn mã sau vào thẻ <body> tại vị trí muốn hiển thị slide.
Demo: Các bạn tải về chạy file index.html để xem trước slide.
Để thao tác bạn làm như sau:
1. Tải jCarousel pulugin tại địa chỉ: http://sorgalla.com/projects/download-zip.php?jcarousel
2. Giải nén tập tin vừa tải, copy 2 thư mục lib(chứa thư viện javascript) và skins(chứa các giao diện cho slide) vào thư mục web của bạn.
3. Đặt đoạn mã sau vào thẻ <head> của trang web để load các thư viện javascript và css.
<!--jQuery library--><script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script><!--jCarousel library--><script type="text/javascript" src="lib/jquery.jcarousel.min.js"></script><!--jCarousel skin stylesheet--><link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
4. Đặt đoạn mã sau vào thẻ <head> để khởi tạo jCarousel.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
visible: 4
});
});
</script>
5. Đặt đoạn mã sau vào thẻ <body> tại vị trí muốn hiển thị slide.
<ul id="mycarousel" class="jcarousel-skin-tango"><li><img src="images/image1.jpg" width="75" height="75" alt="" /></li><li><img src="images/image2.jpg" width="75" height="75" alt="" /></li><li><img src="images/image3.jpg" width="75" height="75" alt="" /></li><li><img src="images/image4.jpg" width="75" height="75" alt="" /></li></ul>6. Và kết quả hiển thị slide trên trang web.
Nguồn: vnhow.
