Cách sử dụng Slick

Chào các bạn đây là bài viết đầu tiên của mình về fontend. Vì kinh nghiệm mình cũng chưa nhiều kiến thức còn kém, nhưng không sao cũng tốt cho các bạn mới tìm hiểu về nó, thêm một link là thêm cơ hội được hiểu về nó hơn. Tìm hiểu về slick này mình tự tìm hiểu không biết có đúng không. Các anh professional thấy có gì sai sai nhẹ tay góp ý .

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. Để hiểu rõ hơn về những gì plugin này có thể mang lại cho bạn, cùng mình tìm hiểu nhé.

2. Chuẩn bị gì ?

2.1. HTML

Chúng ta cần một list danh sách các item để gọi hàm slick xử lý:

<div> <div><h3>1</h3></div> <div><h3>2</h3></div> <div><h3>3</h3></div> <div><h3>4</h3></div> <div><h3>5</h3></div> <div><h3>6</h3></div>
</div>

2.2. Thư viện cần thiết

Thêm thư viện slick bằng cách sử dụng trực tiếp file download này về hoặc sử dụng link của cdn.jsdelivr.net.

CSS

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/_@.com/slick/slick.css"/>

JS

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/_@.com/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

npm install slick-carousel

3. Setting Slick

Dùng jquery để gọi hàm slick

$('.multiple-items').slick({ infinite: true, slidesToShow: 3, slidesToScroll: 3
});

Chúng ta sẽ setting các thuộc tính có sẵn của slick như sau:

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,

Đây là những cái cơ bản về slick mà mình tìm hiểu cũng như test qua, còn rất nhiều thứ về nó như events, methods mình chưa tìm hiểu hết, có cơ hội mình sẽ viết tiếp về nó. Đây là một số link mình tham khảo các bạn cũng có thể tìm hiểu thêm tại đây

https://kenwheeler.github.io/slick/ https://tr.you84815.space/slick/settings/accessibility.html

Mong bài viết sẽ có ích với các bạn.