Cách sử dụng slick (event)

Xin chào các bạn ,lần trước mình có viết một bài sử dụng các API seting cho slick thì hôm nay như đã hứa mình sẽ viết về các sự kiện (event) trong slick. Điều này giúp chúng ta control slide theo ý muốn cũng như việt get dữ liệu một cách dễ dàng hơn.

Cũng như lần trước chúng ta cần một list danh sách html và css cho đề mô lần này. Bên cạnh đó các bạn nên xem lại bài viết trước của mình để có thể hiểu rõ hơn về Slick https://viblo.asia/p/cach-su-dung-slick-ORNZqGJb50n.

Không thể thiếu đó là phần demo các bạn có thể xem demo tại đây

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();

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();
});

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 mà bài trước mình có nói.
Đố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();
});