jQuery Feature Carousel Plugin
Feature Carousel là plugin của jQuery giúp bạn thể hiện hình ảnh, bài viết... với hiệu ứng xoay tròn (carousel). Thể hiện 3 hình ảnh (bài viết) trong 1 thời điểm, các hình ảnh (bài viết) khác được ẩn đi.
Feature Carousel cung cấp nhiều lựa chọn cho phép bạn tùy biến. Bạn cũng có thể tùy biến bằng cách sửa các file CSS.
Các tính năng chính
- Đặt chiều rộng, cao, padding bằng cách khai báo biến trọng plugin
- Chọn hình ảnh thể hiện mặc định
- Có captions riêng cho từng hình ảnh
- Bật / tắt chế độ tự động chạy
- Bật / tắt chế độ tải trước ảnh
- Chỉnh tốc độ và các hiệu ứng chuyển động
Đượ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
Feature 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:
<!-- Feature Carousel CSS -->
<link rel="stylesheet" href="css/featureCarousel.css" charset="utf-8" />
<!-- Thư viện jQuery -->
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<!-- Feature Carousel -->
<script type="text/javascript" src="js/jquery.featureCarousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#featureCarousel").featureCarousel({
// Bạn có thể thêm các tùy biến ở đây
});
});
</script>
Mã HTML như sau:
<div id="featureCarousel">
<div class="feature">
<a href="#"><img alt="Image Caption" src="images/testImage1.png"></a>
<div>
<p>This is some information that can go along with an image.Anything can be placed here, including images.</p>
</div>
</div>
<div class="feature">
<a href="#"><img alt="Image Caption" src="images/testImage2.png"></a>
<div>
<p>This is some information that can go along with an image.Anything can be placed here, including images.</p>
</div>
</div>
<div class="feature">
<a href="#"><img alt="Image Caption" src="images/testImage3.png"></a>
<div>
<p>This is some information that can go along with an image.Anything can be placed here, including images.</p>
</div>
</div>
<div class="feature">
<a href="#"><img alt="Image Caption" src="images/testImage4.png"></a>
<div>
<p>This is some information that can go along with an image.Anything can be placed here, including images.</p>
</div>
</div>
<div class="feature">
<a href="#"><img alt="Image Caption" src="images/testImage5.png"></a>
<div>
<p>This is some information that can go along with an image.Anything can be placed here, including images.</p>
</div>
</div>
</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.featureCarousel.js. Tải về plugin và demo tại đây
Bạn có thích bài viết này?
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 
. 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.