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:
<!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>
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).
$(function(){ $("#slides").slidesjs({ width: 940, height: 528 }); });
start: xác định vị trí bắt đầu của slideshow, có kiểu số(number) giá trị mặc định là 1.
$(function(){ $("#slides").slidesjs({ start: 3 }); });
navigation(object): chỉnh sửa các nút Next và Previous.
$(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". } }); });
pagination(object): hiển thị việc phân trang ảnh
$(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". } }); });
play(object): hiển thị nút Play và Stop
$(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 } }); });
Effect(object): thiết lập các hiệu ứng.
$(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. } } }); });
callback(function):
$(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 } } }); });