js 슬라이드 반응형으로 변경하는 코드 채택완료
사진과 같은 슬라이드에서 pc에서는 4개 모바일에서는 1개를 나타내고싶은데 소스를 어떻게 수정해야할까요 고수님들 도와주세요! html입니다
</strong></p>
<p><script></p>
<p> $('.slider-for').slick({</p>
<p> slidesToShow: 1,</p>
<p> slidesToScroll: 1,</p>
<p> arrows: false,</p>
<p> fade: true,</p>
<p> asNavFor: '.slider-nav'</p>
<p> });</p>
<p> $('.slider-nav').slick({</p>
<p> slidesToShow: 4,</p>
<p> slidesToScroll: 1,</p>
<p> asNavFor: '.slider-for',</p>
<p> dots: true,</p>
<p> focusOnSelect: false</p>
<p> });</p>
<p> </p>
<p> $('a[data-slide]').click(function(e) {</p>
<p> e.preventDefault();</p>
<p> var slideno = $(this).data('slide');</p>
<p> $('.slider-nav').slick('slickGoTo', slideno - 1);</p>
<p> });</p>
<p>
</p>
<p></script></p>
<p><strong>
답변 1개
어떤게 저부분의 슬라이드인지는 모르겠습니다.
.slider-nav 거나
.slider-for 둘중 하나겠죠?
$('.slider-nav').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
focusOnSelect: false,
responsive: [
{
breakpoint: 500 //반응형 너비
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
굵게 친 부분이 반응형 소스입니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인