반응형 웹사이트 - 모바일 테블릿 pc 버전에서 이미지 갯수 다르게 노출하려는데 어떻게 해야할까요? ㅜㅜ

반응형 웹사이트 - 모바일 테블릿 pc 버전에서 이미지 갯수 다르게 노출하려는데 어떻게 해야할까요? ㅜㅜ

QA

반응형 웹사이트 - 모바일 테블릿 pc 버전에서 이미지 갯수 다르게 노출하려는데 어떻게 해야할까요? ㅜㅜ

본문

833399868_1610351743.414.png

<div class="i-photo">
                                <ul>
                                    <li><a href=""><img src="img/mg_01.jpg" alt=""></a></li>
                                    <li><a href=""><img src="img/img_02.jpg" alt=""></a></li>
                                    <li><a href=""><img src="img/img_03.jpg" alt=""></a></li>
                                    <li><a href=""><img src="img/img_04.jpg" alt=""></a></li>
                                    <li><a href=""><img src="img/img_05.jpg" alt=""></a></li>
                                </ul>
</div>

 

반응형 웹사이트 만들려는데 사진 처럼 모바일에는 이미지 3개 

pc와 테블릿에서는 이미지 5개 나오게 하고 싶은데 어떻게 해야하는 지 알려주세요ㅜㅜ

이 질문에 댓글 쓰기 :

답변 3

슬라이더를 쓰는것을 추천드립니다.

 

오픈소스 출처

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

 



<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div class="i-photo">
                                <ul>
                                    <li><a href=""><img src="img/mg_01.jpg" alt=""></a></li>
                                    <li><a href=""><img src="img/img_02.jpg" alt=""></a></li>
                                    <li><a href=""><img src="img/img_03.jpg" alt=""></a></li>
                                    <li><a href=""><img src="img/img_04.jpg" alt=""></a></li>
                                    <li><a href=""><img src="img/img_05.jpg" alt=""></a></li>
                                </ul>
</div>
<script>
    $('.i-photo ul').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>

화살표가있는거보니 슬라이드 구현하시는거같은데

 

슬라이드 자체적으로 반응형지원하는 슬라이드 구하셔서 해당 옵션으로 조절하세요

 

owl과 swiper 둘중 하나 선택해서 사용하시거나 원하시는 기능이 있는걸로 찾아보세요

slick 슬라이더의  responsive 옵션을 이용하시면 됩니다~


$('.슬라이더').slick({
responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: false,
        dots: false
      }
    }
    
  ]
});    

답변을 작성하시기 전에 로그인 해주세요.
전체 109
QA 내용 검색

회원로그인

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