슬라이드형 갤러리 소스를 해상도에 따라 코드를 추가하고 싶은데요 채택완료
Copy
$(document).on('ready', function() {
$(".regular").slick({
dots: false,
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000
});
안녕하세요. 잘 모르겠는게 있어서 고수님들께 질문드려봅니다.
슬라이드 갤러리에 위 소스를 사용중인데요.
slidesToShow: 4, 이 부분이 한줄에 나오는 이미지 갯수인데
해상도가 작은 모바일사이즈에서는 1개로 나오게 하고 싶습니다.
추가로 어떻게 해야할지 도움 좀 부탁드립니다. 감사합니다.
답변 1개
채택된 답변
+20 포인트
1년 전
다음 코드가 도움이 될지 모르겠습니다.
https://kenwheeler.github.io/slick/
Copy
$(document).on('ready', function() {
$(".regular").slick({
dots: false,
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
blue4u
1년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
편안한 밤 되세요(__)