인프런 커뮤니티 질문&답변

ohl0226님의 프로필 이미지
ohl0226

작성한 질문수

반응형 웹사이트 포트폴리오(App Official Landing Website)

[플러그인 사용방법] 콘텐츠 슬라이더 Slick Slider 사용법 및 CSS 변경(2)

슬라이드 질문

작성

·

244

1

$('.my_slider').slick({

     dots: false

})

로 인디케이터 부분을 감추었는데 pc 모바일 해상도에선 사라졌다가, 1023px~600px 해상도에서는 인디케이터가 다시 생기는 현상이 발생해서 질문 드립니다

답변 1

0

dots와 arrows를 스크립트 슬릭 옵션으로 너비에 따라 제어하실 경우는 slick의 responsive 옵션에서 구간 별로 제어 하셔야 합니다.

다른 방법으로는 미디어쿼리 구간에서 css로 display: none !important; 로 제어 하셔도 됩니다.

아래 내용은 슬릭 공식사이트에서 상세히 보실 수 있습니다.

https://kenwheeler.github.io/slick/

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: false
      }
    },
    {
      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
  ]
});
ohl0226님의 프로필 이미지
ohl0226
질문자

자세한 답변 감사합니다! 

ohl0226님의 프로필 이미지
ohl0226

작성한 질문수

질문하기