SlidesJS a responsive slideshow and CSS3

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.

Download

Demo:

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
        }
      }
    });
  });

SlidesJS a responsive slideshow and CSS3

Tagged on: css JQuery