SlidesJS là một slideshow đáp ứng plug-in cho jQuery ( 1.7.1+ ), responsive với các tính năng như cảm ứng và CSS3 . Để hiểu rõ hơn các bạn có thể xem cái ví dụ, demo, và download về để có thể làm cho đồ án các bạn thêm sinh động.
Đặc điểm:
- Responsive: tạo ra các slideshow động tương thích tất cả các màn hình.
- Cảm ứng: có thể cảm ứng trên các thiết bị có hỗ trợ.(cho điện thoại rất hay).
- Hỗ trợ css3.
- Rất dễ cài đặt để sử dụng.
[create_button_post thamso1=” thamso2=’Demo’ thamso3=’http://nongdanit.info/download/slides-slides-js-css3.rar’] [/create_button_post]
Demo:
- Standard slideshow.
- Playing and stopping slideshow.
- Multiple slideshows.
- Using callbacks.
- Basic sliding slideshow.
- Basic fading slideshow.
Hướng dẫn:
[code language=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
/* Prevents slides from flashing */
#slides {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.slides.min.js"></script>
<script>
$(function(){
$("#slides").slidesjs({
width: 940,
height: 528
});
});
</script>
</head>
<body>
<div id="slides">
<img src="img/example-slide-1.jpg">
<img src="img/example-slide-2.jpg">
<img src="img/example-slide-3.jpg">
<img src="img/example-slide-4.jpg">
<img src="img/example-slide-5.jpg">
</div>
</body>
</html>
[/code]
Các tùy chọn:
width và height (number): xét chiều rộng và cao cho slideshow, giá trị này là kiểu số(number).
[code language=”js”]
$(function(){
$("#slides").slidesjs({
width: 940,
height: 528
});
});
[/code]
start: xác định vị trí bắt đầu của slideshow, có kiểu số(number) giá trị mặc định là 1.
[code language=”js”]
$(function(){
$("#slides").slidesjs({
start: 3
});
});
[/code]
navigation(object): chỉnh sửa các nút Next và Previous.
[code language=”js”]
$(function(){
$("#slides").slidesjs({
navigation: {
active: true,
// [boolean] Có sử dụng các nút hay không
// Bạn có thể dùng false để sử dụng các nút của riêng mình
// previous button: class="slidesjs-previous slidesjs-navigation"
// next button: class="slidesjs-next slidesjs-navigation"
effect: "slide"
// [string] có thể là: "slide" or "fade".
}
});
});
[/code]
pagination(object): hiển thị việc phân trang ảnh
[code language=”js”]
$(function(){
$("#slides").slidesjs({
pagination: {
active: true,// [boolean] Hiển thị phân trang hay không
effect: "slide"// [string] Có thể sử dụng "slide" or "fade".
}
});
});
[/code]
play(object): hiển thị nút Play và Stop
[code language=”js”]
$(function(){
$("#slides").slidesjs({
play: {
active: true, // [boolean] Hiện hay không hiện nút này
effect: "slide",// [string] Bạn có thể sử dụng "slide" or "fade".
interval: 5000,// [number]Thời gian dành cho mỗi trình chiếu tính bằng milliseconds
auto: false, // [boolean] Bắt đầu play khi slideshow bắt đầu.
swap: true, // [boolean] show/hide stop and play buttons
pauseOnHover: false, // [boolean] tạm dừng lại slideshow khi hover chuột
restartDelay: 2500 // [number] time delay lại khi slideshow không hoạt động
}
});
});
[/code]
Effect(object): thiết lập các hiệu ứng.
[code language=”js”]
$(function(){
$("#slides").slidesjs({
effect: {
slide: {
// Slide effect settings.
speed: 200,// [number] Speed in milliseconds of the slide animation.
},
fade: {
speed: 300,// [number] Speed in milliseconds of the fade animation.
crossfade: true // [boolean] Cross-fade the transition.
}
}
});
});
[/code]
callback(function):
[code language=”js”]
$(function(){
$("#slides").slidesjs({
callback: {
loaded: function(number) {
// Passes start slide number
},
start: function(number) {
// Passes slide number at start of animation
},
complete: function(number) {
// Passes slide number at end of animation
}
}
});
});
[/code]