30/09/2018, 17:31
SlickSlider - làm thế nào unslick khi resize window
Chào các anh chị,
Hiện mình có một code html và dùng jquery, làm một slide ảnh có 4 ảnh nằm ngang, và vấn đề là responsive như sau:
- Khi màn hình trình duyệt nhỏ hơn 768px thì áp dụng slickslider để
slide giữa các ảnh, và chỉ hiện lên khung chính 2 ảnh thôi, kèm theo
2 mui tên để di chuyển. Khi click hay chuyển qua ảnh nào thì thêm
class active vào ảnh đó. - Khi trình duyệt rộng nhỏ hơn 480px thì hiện
1 ảnh và 2 mũi tên. - Khi màn hình lớn hơn 768px thì loại bỏ hoàn toàn
slickslider (không có hiệu ứng slide, không có mũi tên, nhưng vẫn giữ
được active của ảnh đó)
Vấn để xảy ra khi mình dùng .slick(“unslick”) để destoy slick cho toàn bộ slide. Mình dùng .resize() để xử lý sự kiện khi đổi cỡ màn hình, trong đó mình dùng .width() để lấy độ rộng của màn hình, xét nếu như độ rộng <=768 thì áp dụng slickslider (trong slick này có cho thiết lập khi màn hình nhỏ hoặc lớn hơn).
Nhưng khi màn hình lớn hơn 768px. thì mình gọi .slick(unslick) thì không có hiện tượng gì xảy ra, tuy nhiên khi mình gõ trực tiếp vào trình duyệt phần console thì gọi được.
$('.slider').slick("unslick");
Có ai có giải pháp nào không ạ?
Bài liên quan
