테스트 사이트 - 개발 중인 베타 버전입니다

slick을 통해 이미지 슬라이더를 만들고 있습니다~ 반응형으로도 가능한가요? 채택완료

용디자이너 1년 전 조회 3,722

현재 slick를 가지고 이미지 슬라이더를 만들고 있습니다

한줄에 4장의 이미지가 나오는 슬라이더까지는 완성했는데

반응형으로 구현할려고 하는데 감을 못잡겠어요 ㅠ 
 

아래는 코드문인데 중간사이즈는 이미지 3장이 나오고
모바일에서는 1장만 나오도록 변경이 가능할까요?
고수님들 확인 부탁드립니다~

 

 

<script>

$(function(){
    $('.main_slide').slick({
      dots: true,
      infinite: false,
      speed: 300,
      slidesToShow: 4,
      slidesToScroll: 4,
      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
      ]
    });
})

</script>

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
웅푸
1년 전

          breakpoint: 600,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

용디자이너
1년 전
감사합니다~ !
근데 이상하게 왜 중간 사이즈인 840에서는 3장으로 변경했는데 안바뀔까요 ㅠ
웅프
1년 전
{
breakpoint: 840,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},

추가해주면되지않을까요?

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인