슬라이드형 갤러리 소스를 해상도에 따라 코드를 추가하고 싶은데요

슬라이드형 갤러리 소스를 해상도에 따라 코드를 추가하고 싶은데요

QA

슬라이드형 갤러리 소스를 해상도에 따라 코드를 추가하고 싶은데요

본문


  $(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
  ]
      });
답변을 작성하시기 전에 로그인 해주세요.
전체 2,660
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT