Tôi có một loạt các div HTML tùy chỉnh. Tôi sẽ bao gồm 3 được lưu trữ trong một cầu trượt trong div của lớp. Sau đó tôi sử dụng lớp slide đó để gọi bóng mượt chức năng và áp dụng các cài đặt sau:
$('.slide').slick({
slideToShow: 3,
slideToScroll: 1,
mũi tên: đúng,
});
Dành cho ai chưa biết thì đây slick.js .
Tại thời điểm này, toàn bộ giao diện người dùng của tôi trông như thế này:
Chúng trông ổn khi ở chế độ toàn màn hình, nhưng khi tôi giảm kích thước cửa sổ thì chúng trông rất tệ. Tôi đang nghĩ đến việc thiết lập các cài đặt mượt mà dựa trên kích thước cửa sổ của mình. Ví dụ,
Nếu kích thước cửa sổ = đầy đủ HOẶC 1080px {
$('.slide').slick({
slideToShow: 3,
slideToScroll: 1,
mũi tên: đúng,
});
}
khác nếu kích thước cửa sổ = trung bình hoặc 720px {
$('.slide').slick({
slideToShow: 2,
slideToScroll: 1,
mũi tên: đúng,
});
}khác{
// Cái này dành cho điện thoại
$('.slide').slick({
slideToShow: 1,
slideToScroll: 1,
mũi tên: đúng,
});
}
Cách hiệu quả nhất để đạt được mục tiêu như vậy là gì?
đây là của tôi JSFiddle .
theotài liệu chính thức , có thể rất đơn giản.
$('.response').slick({
dấu chấm: đúng,
vô hạn: sai,
tốc độ: 300,
slideToShow: 4,
slideToScroll: 4,
đáp ứng: [
{
điểm dừng: 1024,
settings: {
slideToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slideToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slideToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
Tôi là một lập trình viên xuất sắc, rất giỏi!