반응형 웹사이트 - 모바일 테블릿 pc 버전에서 이미지 갯수 다르게 노출하려는데 어떻게 해야할까요? ㅜㅜ
<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개
slick 슬라이더의 responsive 옵션을 이용하시면 됩니다~
</strong>
$('.슬라이더').slick({
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: false,
dots: false
}
}
]
}); </p>
<p><strong>
댓글을 작성하려면 로그인이 필요합니다.
화살표가있는거보니 슬라이드 구현하시는거같은데
슬라이드 자체적으로 반응형지원하는 슬라이드 구하셔서 해당 옵션으로 조절하세요
owl과 swiper 둘중 하나 선택해서 사용하시거나 원하시는 기능이 있는걸로 찾아보세요
댓글을 작성하려면 로그인이 필요합니다.
슬라이더를 쓰는것을 추천드립니다.
오픈소스 출처
https://kenwheeler.github.io/slick/
</p>
<p>
<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></p>
<p><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></p>
<p>댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인