jQuery Waterwheel Carousel Plugin

Đăng bởi Neo trong mục Hướng dẫn vào 23 tháng 4, 2010 | Comments
Xem Demo Tải về

Waterwheel Carousel là plugin của jQuery mà bạn có thể dùng để hiển thị hình ảnh theo hiệu ứng cascading waterfall. Bạn có thể đặt Watewheel theo chiều ngang hoặc dọc, có thể gọi sự kiện nào đó khi một bức ảnh được chuyển vào giữa hoặc được click. Plugin hoạt động trên hầu hết các trình duyệt, kể cả IE6.

Giống như Feature Carousel, Waterwheel Carousel cũng cung cấp nhiều lựa chọn cho phép bạn tùy biến. Waterwheel cũng không yêu cầu phải thêm file CSS.

Được phát triển bởi Brian Osborne. Bạn có thể sử dụng theo giấy phép GPL License. Do trên trang web báo có virus nên tôi đặt demo và file nguồn trên vannyneo.

Cách sử dụng

Waterwheel Carousel yêu cầu jQuery bản 1.4, như vậy bạn sẽ thêm vào thẻ <head> của trang web:

<!-- Thư viện jQuery -->
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<!-- Waterwheel Carousel -->
<script type="text/javascript" src="js/jquery.waterwheelCarousel.js"></script>
<script type="text/javascript">
	$("#waterwheelCarousel").waterwheelCarousel("horizontal",{
        // Bạn có thể thêm các tùy biến ở đây
        startingItem: 6
    });
</script>

Mã HTML như sau:

<div id="waterwheelCarousel">
    <img src="images/testImage1.png" alt="Test Image 1" />
    <img src="images/testImage2.png" alt="Test Image 2" />
    <img src="images/testImage3.png" alt="Test Image 3" />
    <img src="images/testImage4.png" alt="Test Image 4" />
    <img src="images/testImage5.png" alt="Test Image 5" />
    <img src="images/testImage6.png" alt="Test Image 6" />
    <img src="images/testImage7.png" alt="Test Image 7" />
    <img src="images/testImage8.png" alt="Test Image 8" />
    <img src="images/testImage9.png" alt="Test Image 9" />
    <img src="images/testImage10.png" alt="Test Image 10" />
    <img src="images/testImage11.png" alt="Test Image 11" />
</div>

Bạn có thể xem thêm các tùy biến trên trang chủ của plugin hoặc kéo xuống dưới cùng file jquery.waterwheelCarousel.js. Tải về plugin và demo tại đây

plugin, jquery, carousel

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter