Hướng dẫn tạo slider với Slick js

11/04/2020 2558 lượt xem

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

JS

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

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ý:

Dùng jquery để gọi hàm 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 css
cssEase: '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,

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận

Dự án đã hoàn thiện
Mẫu web dịch vụ in ấn – photocopy
Mẫu website dịch vụ spa tổng hợp có bán hàng
Mẫu website dịch vụ vận chuyển logistics
Bài viết theo chủ đề

Chủ đề: Code theme wordpress

Hướng dẫn tạo theme WordPress phần 1
Hướng dẫn tạo theme WordPress phần 2

Xem hết loạt bài chủ đề này

Bài viết mới nhất
Hướng dẫn sử dụng plugin W3 Total Cache tăng tốc WordPress
JavaScript là gì?
HTML là gì?
Tạo thanh scroll ngang sử dụng thuộc tính overflow-x trong css
Kích hoạt thanh toán PayPal cho VNĐ trên WooCommerce