슬라이드형 갤러리 소스를 해상도에 따라 코드를 추가하고 싶은데요
본문
$(document).on('ready', function() {
$(".regular").slick({
dots: false,
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000
});
안녕하세요. 잘 모르겠는게 있어서 고수님들께 질문드려봅니다.
슬라이드 갤러리에 위 소스를 사용중인데요.
slidesToShow: 4, 이 부분이 한줄에 나오는 이미지 갯수인데
해상도가 작은 모바일사이즈에서는 1개로 나오게 하고 싶습니다.
추가로 어떻게 해야할지 도움 좀 부탁드립니다. 감사합니다.
답변 1
다음 코드가 도움이 될지 모르겠습니다.
https://kenwheeler.github.io/slick/
$(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
]
});
오 해보니 되는것 같습니다 일단 내일 다시 함 더 확인해봐야긴한데 넘넘 감사드립니다.
편안한 밤 되세요(__)
답변을 작성하시기 전에 로그인 해주세요.
