SIR
목록으로

js 반응형 적용하기(슬라이드) 채택완료

dmsdud
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전 조회 2,458
답변 1
목록

pc에서는 객체가 4개, 모바일에서는 1개 이렇게 적용하고싶은데 js에서 기기에 따라 다르게 적용 가능할까요?

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: true

 });

 

 $('a[data-slide]').click(function(e) {

   e.preventDefault();

   var slideno = $(this).data('slide');

   $('.slider-nav').slick('slickGoTo', slideno - 1);

 });


 

</script>
#그누보드5 #슬라이드 #js #반응형 #html

답변 1개

채택된 답변
+20 포인트

g5_is_mobile 변수를 활용하면 되지 않을까요?

Copy 
<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>

 

이런식으로 되지 않을까 싶습니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

적용이 안돼용 ㅜㅜ

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고