js 슬라이드 반응형으로 변경하는 코드
본문
사진과 같은 슬라이드에서 pc에서는 4개 모바일에서는 1개를 나타내고싶은데 소스를 어떻게 수정해야할까요 고수님들 도와주세요! html입니다
<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
어떤게 저부분의 슬라이드인지는 모르겠습니다.
.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
}
}
]
});
굵게 친 부분이 반응형 소스입니다.
와,, 대박 바로 해결했습니다 너무 감사합니다..!!!!!!!!!!!!!!!
답변을 작성하시기 전에 로그인 해주세요.