js 반응형 적용하기(슬라이드) 채택완료
pc에서는 객체가 4개, 모바일에서는 1개 이렇게 적용하고싶은데 js에서 기기에 따라 다르게 적용 가능할까요?
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><strong><span style="background-color:#e74c3c;"> slidesToShow: 4,</span></strong></p>
<p> slidesToScroll: 1,</p>
<p> asNavFor: '.slider-for',</p>
<p> dots: true,</p>
<p> focusOnSelect: true</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개
g5_is_mobile 변수를 활용하면 되지 않을까요?
</p>
<pre>
<script>
if ( <span style="color: rgb(0, 0, 0); font-family: monospace; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">g5_is_mobile</span> ) //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 ( <span style="color: rgb(0, 0, 0); font-family: monospace; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">g5_is_mobile</span> ) //Mobile일때
$('.slider-for').slick('slickGoTo', slideno - 1);
else
$('.slider-nav').slick('slickGoTo', slideno - 1);
});
</script>
</pre>
<p>
이런식으로 되지 않을까 싶습니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인