사진과 같은 슬라이드에서 pc에서는 4개 모바일에서는 1개를 나타내고싶은데 소스를 어떻게 수정해야할까요 고수님들 도와주세요! html입니다
Copy
<script>
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
focusOnSelect: false
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider-nav').slick('slickGoTo', slideno - 1);
});
</script>답변 1개 / 댓글 1개
채택된 답변
+20 포인트
조나단입니다
2020-07-03 (금) 14:11:00
어떤게 저부분의 슬라이드인지는 모르겠습니다.
.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개
답변을 작성하려면 로그인이 필요합니다.