jCoverflip là một jQuery plugin giúp chúng ta tạo ra các coverflow -một giao diện có thể hiển thị hình ảnh hoặc bất kì nội dung nào.
Nội dung được hiển thị ra bằng việc click vào bất kì mục nào hoặc sử dụng thanh công cụ slider kéo qua lại (jQuery UI slider).
jCoverflip dễ dàng tùy chỉnh số lượng mục cần hiển thị cũng như tốc độ di chuyển qua lại . Ngoài ra để trông phù hợp , bắt mắt hơn bạn có thể tùy chỉnh màu sắc, font , style.
Cách sử dụng :
Trước tiên, bạn cần làm 4 bước :
3 : Thêm style vào css của bạn:
.ui-jcoverflip {
position: relative;
}
.ui-jcoverflip--item {
position: absolute;
display: block;
}
#flip {
height: 200px;
width: 630px;
margin-bottom: 50px;
}
#flip .ui-jcoverflip--title {
position: absolute;
bottom: -30px;
width: 100%;
text-align: center;
color: #555;
}
#flip img {
display: block;
border: 0;
outline: none;
}
#flip a {
outline: none;
}
#wrapper {
height: 300px;
width: 630px;
overflow: hidden;
position: relative;
}
.ui-jcoverflip--item {
cursor: pointer;
}
4 : Chèn jCoverflip script sau jQuery and jQuery UI:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.js"></script>
<script type="text/javascript" src="js/jquery.jcoverflip.js"></script>
Cách dùng đơn giản
Đoạn mã gọi jCoverflip
$(function(){
jQuery( '#flip' ).jcoverflip()
});
Và mã HTML sẽ là:
<div id="wrapper">
<ul id="flip">
<li title="The first image" ><img src="img/1.png" /></li>
<li title="A second image" ><img src="img/2.png" /></li>
<li title="This is the description" ><img src="img/5.png" /></li>
<li title="Another description" ><img src="img/4.png" /></li>
<li title="A title for the image" ><img src="img/3.png" /></li>
</ul>
</div>
jCoverflip chạy tốt với các trình duyệt phổ biến , để tìm hiểu kĩ hơn về cách sử dụng các bạn có thể tham khảo document
tại đây