js 반응형 적용하기(슬라이드)
본문
pc에서는 객체가 4개, 모바일에서는 1개 이렇게 적용하고싶은데 js에서 기기에 따라 다르게 적용 가능할까요?
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: true
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider-nav').slick('slickGoTo', slideno - 1);
});
</script>
답변 1
g5_is_mobile 변수를 활용하면 되지 않을까요?
<script>
if ( g5_is_mobile ) //Mobile일때
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
else //PC일때
$('.slider-nav').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
focusOnSelect: true
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
if ( g5_is_mobile ) //Mobile일때
$('.slider-for').slick('slickGoTo', slideno - 1);
else
$('.slider-nav').slick('slickGoTo', slideno - 1);
});
</script>
이런식으로 되지 않을까 싶습니다.
적용이 안돼용 ㅜㅜ
답변을 작성하시기 전에 로그인 해주세요.