js 슬라이드 반응형으로 변경하는 코드 채택완료
사진과 같은 슬라이드에서 pc에서는 4개 모바일에서는 1개를 나타내고싶은데 소스를 어떻게 수정해야할까요 고수님들 도와주세요! html입니다
Copy
$('.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);
});
답변 1개
채택된 답변
+20 포인트
조나단입니다
5년 전
어떤게 저부분의 슬라이드인지는 모르겠습니다.
.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개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인