bxSlider là một plugin JavaScript nhẹ nhàng dành cho việc tạo các slideshow đáp ứng (responsive), cho phép hiển thị nội dung theo nhiều cách khác nhau với hiệu ứng chuyển động mượt mà.
Tính năng nổi bật của bxSlider
Thiết kế đáp ứng hoàn toàn với mọi kích thước màn hình và thiết bị;
Hỗ trợ ba chế độ trượt: ngang, dọc và hiệu ứng mờ dần;
Cho phép chèn hình ảnh, video hoặc bất kỳ nội dung HTML nào;
Tương thích với cảm ứng chạm trên thiết bị di động;
Hỗ trợ các trình duyệt phổ biến bao gồm Firefox, Chrome, Safari, iOS, Android và IE7+.
Cách sử dụng bxSlider:
Bước đầu tiên, cần tải thư viện jQuery, sau đó nhúng plugin bxSlider và file CSS đi kèm:
1 <!-- File CSS của bxSlider -->
2 <link href="jquery.bxslider.css" rel="stylesheet" />
3
4 <!-- Thư viện jQuery -->
5 <script src="jquery-3.1.1.min.js"></script>
6 <!-- File JavaScript của bxSlider -->
7 <script src="jquery.bxslider.js"></script>
Tiếp theo, tạo cấu trúc HTML cho slideshow:
1 2 - 
3 - 
4 - 
5 - 
6 - 
7
Cuối cùng, khởi tạo plugin với các tham số tùy chỉnh:
1 <script>
2 $(document).ready(function() {
3 $('.slider-gallery').bxSlider({
4 mode: 'fade',
5 moveSlides: 1,
6 slideMargin: 20,
7 infiniteLoop: false,
8 slideWidth: 800,
9 minSlides: 1,
10 maxSlides: 1,
11 speed: 600,
12 pager: true,
13 controls: true,
14 auto: true,
15 pause: 3000
16 });
17 });
18 </script>
Các tham số cấu hình của bxSlider:
| Tham số | Mô tả | Giá trị mặc định |
|---|---|---|
| mode | Chế độ trượt: 'horizontal' - ngang, 'vertical' - dọc, 'fade' - mờ dần | horizontal |
| speed | Tốc độ chuyển đổi giữa các slide, đơn vị miligiây | 500 |
| startSlide | Vị trí slide khởi đầu, chỉ số bắt đầu từ 0 | 0 |
| randomStart | Bắt đầu ngẫu nhiên tại vị trí bất kỳ | false |
| infiniteLoop | Cho phép trượt vòng lặp liên tục, khi đến slide cuối sẽ quay về slide đầu | true |
| easing | Hiệu ứng chuyển động mở rộng, có thể sử dụng kết hợp với jQuery Easing | null |
| captions | Hiển thị tiêu đề ảnh, sử dụng thuộc tính title trong thẻ img | false |
| video | Hỗ trợ video, cần thêm plugin jquery.fitvids.js | false |
| pager | Hiển thị các nút phân trang bên dưới slideshow | true |
| controls | Hiển thị nút điều khiển trước/sau | true |
| auto | Tự động trượt sau khoảng thời gian quy định | false |
| pause | Thời gian dừng giữa các lần trượt tự động, đơn vị miligiây | 4000 |
| autoHover | Tạm dừng trượt tự động khi di chuột vào vùng slideshow | false |