Nội dung bài học:

1. Slick là gì ?

Trang chủ: https://kenwheeler.github.io/slick/ 

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/slick-carousel@1.8.1/slick/slick.css"/>

JS

<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

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,

4. Method

4.1 slick

Phương thức khởi tạo của slick Ví dụ:

$(document).ready(function(){
  $('.slider').slick();
});

Ta sẽ truyền các thuộc tính mà chúng ta muốn config từ ban đầu

4.2 slick

Phương thức này huỷ bỏ config slick. Đưa các item về trạng thái không có slide Ví dụ:

$(document).ready(function(){
  $('.slider').slick();
});

$('.js-method').on('click', function() {
  $('.slider').slick('unslick');
});

Before

After

4.3 slickNext

Phương thức giúp ta điều hướng các button next và prev mà không cần phải sử dụng button mặc định của slick. Ví dụ:

$(document).ready(function(){
  $('.slider').slick();
});

$('.js-method').on('click', function() {
  $('.slider').slick('slickNext');
});

Ngoài việc next bằng button mặc định ta cũng có thể gán sự kiện next cho một button khác. Điều này phục vụ rất tốt cho thiết kế slide theo ý muốn của mình

4.4 slickPrev

Phương thức này tương tự phương thức slickNext Ví dụ :

$(document).ready(function(){
  $('.slider').slick();
});

$('.js-method').on('click', function() {
  $('.slider').slick('slickPrev');
});

4.5 slickPause, slickPlay

Khi slick ở trạng thái autoplaySpeed slide sẽ chạy liên tục nếu muốn dừng trạng thái này ta sử dụng phương thức slickPause Ví dụ :

$(document).ready(function(){
  $('.slider').slick({
    autoplay: true,
    autoplaySpeed: 500,
  });
});

$('.js-stop').on('click', function() {
  $('.slider').slick('slickPause');
});

$('.js-play').on('click', function() {
  $('.slider').slick('slickPlay');
});

slickPlay sẽ huỷ lệnh slickPause

4.6 slickGoTo

slickGoTo sẽ show vị trí item mà ta muốn show Ví dụ:

$(document).ready(function(){
  $('.slider').slick();
});

$('.js-method').on('click', function() {
  $('.slider').slick('slickGoTo', 2, true);
});

4.7 slickCienSlide

Trả về vị trí slide hiện tại Ví dụ:

$(document).ready(function(){
  $('.slider').slick();
});

$('.js-method').on('click', function() {
  var currentSlide = $('.slider').slick('slickCurrentSlide');
  $('.result').text('Slide hiện tại là :' + currentSlide );
});

4.8 slickAdd

Thêm một slide. Nếu ta thêm một vị trí cho nó, nó sẽ thêm tại vị trí đó . Nếu không có chỉ mục nào được cung cấp.
Cụ thể các tham số truyền vào như sau:

$('.slider').slick('slickAdd', element, index, addBefore);

element: phần tử được thêm vào .
index: vị trí phần tử được thêm vào .
addBefore: thêm vào trước hay thêm vào sau vị trí được chọn .
Ví dụ:

$(document).ready(function(){
  $('.slider').slick();
});

$('.js-method').on('click', function() {
  $('.slider').slick('slickAdd', '<p>4</p>', 1, true);
});

4.9 slickRemove

Xóa slide theo vị trí, các tham số truyền vào tương tự slickAdd

$('.slider').slick('slickRemove', index, removeBefore);

Ví dụ:

$(document).ready(function(){
  $('.slider').slick();
});

$('.js-method').on('click', function() {
  $('.slider').slick('slickRemove', 1, true);
});

4.10 slickFilter

Lọc các phần tử trong slide, phương thức này cũng khá hay. Cụ thể các tham số như sau :

$('.slider').slick('slickFilter', filter);

Trong đó filter là một funtion: Ví dụ:

$(document).ready(function(){
  $('.slider').slick({
    slidesToShow: 3,
  });
});

$('.js-filter').on('click', function() {
  $('.slider').slick('slickFilter', ':even');
});

$('.js-unfilter').on('click', function() {
  $('.slider').slick('slickUnfilter');
});

Trong ví dụ này nó sẽ lọc những phần tử có vị trí chẵn. ta có thể thêm phần filter bằng các điều kiện khác ( https://stackoverflow.com/questions/47714202/slick-slider-filter-by-class-issue ) như :

 var filter = $(this).data('attribute');

5. Event Slick

5.1 afterChange

Kích hoạt sau khi slide chạy qua 1 item.
Đối số : slick (đối tượng slick được gán cho thẻ đó) , currentSlide (item hiện tại mà slick đang show )
Ví dụ:

$(document).ready(function(){
  $('.slider').on('afterChange', function(event, slick, currentSlide){
    $('.result').text('afterChange : ' + (currentSlide + 1));
  });
  $('.slider').slick();
});

Sự kiện sẽ kích hoạt sau khi ta click vào slick ở đây ta có thể thêm các sự kiện hoặc thay đổi nội dung cho các thẻ khác trong project của chúng ta. Và đừng quên tạo setting cho class sau đó

  $('.slider').slick();

5.2 beforeChange

Ngược lại với afterChange sự kiện sẽ kích hoạt trước khi slick chạy qua item khác trong bản demo link trên tôi có đưa cho các bạn nếu ta để ý kĩ thì thẻ <div class="result"></div> thay đổi trước khi qua 1 item khác.
Đối số : slick (đối tượng slick được gán cho thẻ đó) , currentSlide (item hiện tại mà slick đang show )
Ví dụ:

$(document).ready(function(){
  $('.slider').on('afterChange', function(event, slick, currentSlide){
    $('.result').text('afterChange : ' + (currentSlide + 1));
  });
  $('.slider').slick();
});

5.3 breakpoint

Sự kiện này giúp ta điều chỉnh được kích thước của thông qua việc responsive bằng API setting.
Đối số : slick (đối tượng slick được gán cho thẻ đó) , breakpoint (kích thước hiện tại của class slide )
Ví dụ:
Ta có phần setting như đã nói ở trên:

$('.slider').slick({
    respondTo: 'slider',
    slidesToShow: 5,
    responsive: [{
      breakpoint: 640,
      settings: {
        slidesToShow: 5
      }
    }, {
      breakpoint: 480,
      settings: {
        slidesToShow: 3
      }
    }, {
      breakpoint: 320,
      settings: {
        slidesToShow: 1
      }
    }]
  });

Với các kích thước khác nhau cho từng responsive theo kích thước màn hình như vậy. Giả sử người dùng muốn dự án của mình điều chỉnh được kích thước của slide đó sao cho vừa mắt khung làm việc của mình thì breakpoint sẽ giúp bạn trong điều này.

$('.js-600').on('click', function() {
    $('.slider').css('width', '600px');
    $('.slider').slick('slickSetOption', {}, true);
  });
  $('.js-450').on('click', function() {
    $('.slider').css('width', '450px');
    $('.slider').slick('slickSetOption', {}, true);
  });
  $('.js-300').on('click', function() {
    $('.slider').css('width', '300px');
    $('.slider').slick('slickSetOption', {}, true);
  });

Khi yêu cầu sự kiện slick ta phải set css lại kích cỡ cho slide bằng css sau đó setOption cho đó để khớp với css ta vừa set ( slickSetOption sự kiện này được nói bên method bài này mình sẽ viết sau nhé). Kích thước của slide sẽ thay đổi và breakpoint setting trên show item phù hợp.

5.4 destroy

Destroy show toàn bộ item, hay nói cách khác là hủy show slide
Đối số : slick (đối tượng slick được gán cho thẻ đó) , event (gán sự kiện cho class)
Ví dụ:

$('.js-unslick').on('click', function() {
  $('.slider').slick('unslick');
});

Bùm slick biến mất.

5.5 edge

Thông báo giới hạn của slick
Đối số : slick (đối tượng slick được gán cho thẻ đó) , event (gán sự kiện cho class), direction (giới hạn :bên trái, bên phải, bên trên, bên dưới)
Ví dụ:
Nếu có giới hạn thì không thể thiếu khi chúng ta phải setting Slick infinite: false

$(document).ready(function(){
  $('.slider').on('edge', function(event, slick, direction){
    $('.result').text('edge : ' + direction);
  });
  $('.slider').slick({
    infinite: false,
  });
});

5.6 init

Sự kiện được kích hoạt sau khi Slick được khởi tạo lưu ý nếu dùng event này bạn cần đặt nó trước khi gán class cho slick $('.slider').slick()
Đối số : slick (đối tượng slick được gán cho thẻ đó) , event (gán sự kiện cho class)
Ví dụ:

$(document).ready(function(){
  $('.slider').on('init', function(event, slick){
    $('.result').text('init : tôi được khởi tạo trước anh ý');
  });
  $('.slider').slick();
});

5.7 reInit

Xảy ra bất cứ khi nào slick được tái khởi tạo. Ví dụ khi đang xem ở rất xa ở môt item nào đó bạn muốn xem lại trang đầu tiên hay bối cảnh xung quang đầu tiên khi bắt đầu xem trang web, thì event này giúp bạn điều đó.
Đối số : slick (đối tượng slick được gán cho thẻ đó) , event (gán sự kiện cho class)
Ví dụ:

$(document).ready(function(){
  $('.slider').on('init', function(event, slick){
    $('.result').text('init : bấm vào đi tôi sẽ khởi tạo lại từ ban đầu');
  });
  $('.slider').slick();
});

5.8 lazyLoaded

Sự kiện xảy ra sau khi một hình ảnh được tải. Sự kiện sẽ sảy ra một lần khi bạn lướt qua lần các item và lần tiếp theo event này sẽ không được gọi
Đối số : slick (đối tượng slick được gán cho thẻ đó) , event (gán sự kiện cho class), image(hình ảnh biến này các bạn thử log ra xem nó thuộc kiểu typeOf gì nhé) ,imageSource (địa chỉ hình ảnh trong source code)
Ví dụ:

$(document).ready(function(){
  $('.slider').on('lazyLoaded', function(event, slick, image, imageSource){
    $('.result').text('lazyLoaded : ' + imageSource + 'vị trí tôi đây');
  });
  $('.slider').slick({
    lazyLoad: 'ondemand',
  });
});

lazyLoad: 'ondemand' các bạn còn nhớ trong setting không. Tải một lại hình khi đi được một vòng của slide.

5.9 lazyLoadError

Sự kiện xảy ra sau khi tải hình ảnh thất bại. Điều này giúp ta biết được ảnh nào không load được khi chạy.
Đối số : slick (đối tượng slick được gán cho thẻ đó) , event (gán sự kiện cho class), image(hình ảnh biến này các bạn thử log ra xem nó thuộc kiểu typeOf gì nhé hihihi) ,imageSource (địa chỉ hình ảnh trong source code)
Ví dụ:

$(document).ready(function(){
  $('.slider').on('lazyLoadError', function(event, slick, image, imageSource){
    $('.result').text('lazyLoadError : ' + imageSource + ' vị trí tôi đây nhưng mà không có gì huhuhuh');
  });
  $('.slider').slick({
    lazyLoad: 'ondemand',
  });
});

 

5.10 setPosition

Sự kiện xảy ra mỗi khi vị trí được load lại .
Đối số : slick (đối tượng slick được gán cho thẻ đó) , event (gán sự kiện cho class), direction (giới hạn :bên trái, bên phải, bên trên, bên dưới)
Ví dụ:

$(document).ready(function(){
  $('.slider').on('setPosition', function(event, slick, direction){
    $('.result').text('setPosition : tôi được set lại này');
  });
  $('.slider').slick();
});

Sự kiện diễn ra sau khi vị trí các item được load lại. Thử F12 bên demo để hiểu rõ đoạn text của class result sẽ load lại

5.11 swipe

Sự kiện xảy ra khi trượt slide của bạn, nên nhớ lướt nhé không click bấm để chạy slide Đối số : slick (đối tượng slick được gán cho thẻ đó) , event (gán sự kiện cho class), direction (giới hạn :bên trái, bên phải, bên trên, bên dưới)
Ví dụ:

$(document).ready(function(){
  $('.slider').on('swipe', function(event, slick, direction){
    $('.result').text('swipe : ' + direction + 'lướt tôi đi kahahaha');
  });
  $('.slider').slick();
});

Tài liệu tham khảo

https://tr.you84815.space/slick/settings/accessibility.html

Nguồn: viblo.asia