Bài viết này mình sẽ hướng dẫn cách tạo responsive carousel ( slider ) để ứng dụng vào dự án website của mình.
1. Slick là gì ?
Slick.js là một plugin jQuery nổi tiếng được tạo ra bởi Ken Wheeler cho phép bạn tạo ra những responsive carousel tuyệt đẹp, tương thích với các màn hình khác nhau cũng như trình duyệt khác nhau, giúp bạn tiết kiệm thời gian khởi tạo dự án.
2. Cách sử dụng
2.1. Chuẩn bị
Để sử dụng được bạn cần đưa thư viện vào dự án của bạn, có 2 cách để thực hiện:
+ Cách 1: Tải về bộ thư viện để ngay trong project của mình và trỏ đường dẫn đến (link tải: http://kenwheeler.github.io/slick/ )
+ Cách 2: Bạn coppy đường dẫn tới thư viện tại CDN:
CSS
|
1 |
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> |
JS
|
1 |
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> |
Nếu trong quá trình làm lỗi phát sinh bạn đổi slick.min.js thanh slick.js để sử dụng tốt hơn nhé.
Hoặc các bạn có thể cài bằng npm vào node-modules
|
1 |
npm install slick-carousel |
2.2. Cách sử dụng
Chúng ta cần một list danh sách các item để gọi hàm slick xử lý:
|
1 2 3 4 5 |
<div class="main-slider"> <img src="Link hình ảnh"> <img src="Link hình ảnh"> <img src="Link hình ảnh"> </div> |
Dùng jquery để gọi hàm slick
|
1 |
$('.main-slider').slick(); |
Chỉ đơn giản vậy thôi là bạn đã có 1 slider với hình ảnh rồi nhé
Các hiệu ứng khác nhau bạn có thể truy cập trang demo của slick để xem thêm và ứng dụng nhé: http://kenwheeler.github.io/slick/
2.3. Danh sách thuộc tính:
| Tên thuộc tính | Mục đích sử dụng | Kiểu giá trị | Ví dụ : (mặc định) |
|---|---|---|---|
| slidesToShow | Số lượng phần tử được nhìn thấy | int | |
| slidesToScroll | Số phần tử được lướt sang | int | |
| accessibility | Cho phép qua lại phần tử bằng bàn phím qua lại | bool | Accessibility: true |
| adaptiveHeight | Nếu kích thước item lớn thì sẽ tự động giãn chiều cao | bool | adaptiveHeight:false |
| autoplaySpeed | Tự đông chạy cho slide | int(ms) | autoplaySpeed :3000 |
| arrows | Cho phép hiển thị phím mũi tên chạy | bool | arrows:true |
| asNavFor | Đặt thanh trượt thành điều hướng của thanh trượt khác Thường đi với focusOnSelect | string | $(function(){ $(“#slider”).slick( autoplay: true, speed: 1000, arrows: false, asNavFor: “#thumbnail_slider” }); $(“#thumbnail_slider”).slick({ slidesToShow: 3, speed: 1000, asNavFor: “#slider” }); }); https://codepen.io/blanks-site/pen/pWMGjm |
| appendArrows | Đưa các button điều khiển vào một thẻ cho trước | string | appendArrows: ‘.contron-pre-next’ |
| appendDots | Tương tự như anpenArrows là chấm chỉ mục | string | appendDots: ‘.dot’ |
| prevArrow | Button next slide | String | <button type="button" class="slick-prev">Previous</button> |
| nextArrow | Button prev slide | String | <button type="button" class="slick-next">Next</button> |
| centerMode | Hiển thị slide ở trung tâm, bao gồm các slide trước và tiếp theo. slidesToShowChỉ định cả hai với một số lượng item là số lẻ. | bool | centerMode: true |
| centerPadding | Khoảng cách của phần hiển thị bị che một item chưa show (dung chung với centerMode) | String | centerPadding :’50px’ or ‘50%’ |
| cssEase | Hiệu ứng chuyển trang | String | Tìm hiểu them về animation-timing-funtion của csscssEase: 'linear' or 'cubic-bezier(0.7, 0, 0.3, 1)'linear,ease,ease-in,ease-out,ease-in-out,step-start,step-end,steps(int,start,end),cubic bezier(n,n,n,n),initial,inherit; |
| customPaging | Biến những dấu chấm phân silde thành những con số. chính vì vậy dot: true | Funtion | customPaging: function(slick,index) { return ‘<a>’ + (index + 1) + ‘</a>’; } |
| dot | Dấu chấm định danh địa chỉ đên cho mỗi item show | bool | dots: fasle |
| dotClass | Css class cho các dấu chấm tương ứng với các slide của slider | string | dotClass: ‘slick-dots’ |
| draggable | Cho phép kéo chuột | bool | draggable: true |
| fade | Mờ dần khi chuyển slide | bool | fade: false |
| focusOnSelect | Khi click vào slide con bên dưới thì slide chính được show | bool | focusOnSelect: false |
| easing | Thêm các animation của jquery | string | easing: ‘linner'( or swing,_default ) |
| infinite | Vòng lăp vô tận | bool | infinite:true |
| initialSlide | Thứ tự xuất hiện lần đầu của item show | int | initialSlide: 0 |
| rows | Show số hàng item trên một slile | int | rows: 1 |
| responsive | Reponsive cho từng kích thước view | Object | responsive: [ { breakpoint: 768, settings: { arrows: false, centerMode: true, centerPadding: ’40px’, slidesToShow: 3 } }, { breakpoint: 480, settings: { arrows: false, centerMode: true, centerPadding: ’40px’, slidesToShow: 1 }} ] |
| mobileFirst | Bật tắt chế độ reponsive ngay trên màn hình desktop | bool | mobileFirst: false |
| pauseOnFocus | Tạm dừng auto slide đang chạy khi click vào item show | bool | pauseOnFocus: true |
| pauseOnDotsHover | Tạm dừng auto slide đang chạy khi hover vào dot show | bool | pauseOnDotsHover: true |
| pauseOnHover | Tạm dừng auto slide đang chạy khi hover vào item show | Bool | pauseOnHover: true |
| respondTo | Chiều rộng được định cho repoonsive | String | respondTo: ‘tenClass’ |
| slide | Show toàn bộ item | element | Slide:’ ‘ (using Slide: ‘p.light’ nó sẽ show toàn bộ item ra) |
| slidesPerRow | Show toàn bộ item. Ví dụ bằng 2 thì xếp 2 item vào 1 nhóm trải dài, có 8 item thì có 4 nhóm | int | slidesPerRow: 1 |
| speed | Tốc độ chuyển slide | Int | Speed:300 |
| swipe | Cho phép vuốt slide | Bool | Swipe: true |
| swipeToSlide | Vuốt click chỉ đươc 1 item nếu true được bật | Bool | swipeToSlide: false |
| touchMove | Bật tắt chế độ cảm ứng | Bool | touchMove: true |
| touchThreshold | Khi chuyển slide bằng cách vuốt thì thuộc tính này tính chiều dài của việc vuốt đó bằng công thức (1/value)*chiều dài item | Float | touchThreshold:5 |
| variableWidth | Vô hiệu hóa vùng nhìn của slide | Bool | variableWidth: false |
| vertical | Slide di chuyển lên xuống thay vì trái phải hoặc dùng verticalSwiping | bool | vertical: false, |
