Tải về - Download
Phiên bản 1.2
Phiên bản zip chỉ có file plugin pixel-slide-min.zip
phiên bản 1.2 có bổ sung thêm tùy chọn pageControl để chuyển qua các slide kế tiếp
Phiên bản zip chỉ có file plugin pixel-slide-min.zip
phiên bản 1.2 có bổ sung thêm tùy chọn pageControl để chuyển qua các slide kế tiếp
Đưa các file sau vào trong thẻ "head
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="js/pixel-slide.js"></script>
<link rel="stylesheet" href="css/pixel-slide.css" type="text/css" />
Với jquery thì các bạn có thể tùy chọn phiên bản
- Các bạn sử dụng cú pháp $([tên đối tượng]).pixel_slide();
- Để khởi tạo kèm theo thuộc tính các bạn sử dụng như sau:
$([tên đối tượng]).pixel_slide({
thuộc tính 1: giá trị 1,
thuộc tính 2: giá trị 2,
});
Ví dụ:
<div class="your-css">
<div class="pixel-slide">
<div class="content-slide" data-img="images/album/img01.jpg">
<div class="content-title">
Xe hơi đẹp
</div>
</div>
<div class="content-slide" data-img="images/album/img02.jpg">
<div class="content-title">
Hot girl
</div>
</div>
<div class="content-slide" data-img="images/album/img03.jpg"></div>
<div class="content-slide" data-img="images/album/img04.jpg"></div>
<div class="content-slide" data-img="images/album/img05.jpg"></div>
</div>
<script type="text/javascript">
$(".pixel-slide").pixel_slide({
height: "500px",
delayTime:5000,
pageControl:true
});
</script>
</div>
Tại phiên bản 1.2 có bổ sung thêm tính năng tiêu đề thông minh khi cài đặt các bạn cần bổ sung thêm thẻ sau với định dạng
<div class="content-slide" data-img="images/album/img16.jpg">
<div class="caption-smart" data-location="bottom">
<h3>Album ảnh thiên nhiên</h3>
</div>
</div>
data-location có 4 tùy chọn cho vị trí hiển thị đó là top, bottom, top-right và bottom-right
width:"100%",
height:"100%",
delayTime:3000,
mouseEnterStop:false,
pageSlide:true,
pageControl: false
width | Chiều ngang của slide mặc định là 100% |
height | Chiều cao của slide mặc định là 100% |
delayTime | Thời gian trễ khi chuyển hình ảnh |
mouseEnterStop | Sự kiện nếu giá trị "true" dừng chuyển hình ảnh qua lại và ngược lại |
pageSlide | Cho phép hoặc không cho phép hiển thị nút chuyển nhanh các hình ảnh |
pageControl | Cho phép hoặc không cho phép hiển thị nút chuyển sang hình ảnh kế tiếp hoặc quay lại hình ảnh trước |