창크기에 따른 제이쿼리를 다르게 적용하고싶습니다. 채택완료
서잰션
5년 전
조회 1,015
https://sir.kr/g5_skin/25206?sfl=wr_subject%7C%7Cwr_content&stx=okca">https://sir.kr/g5_skin/25206?sfl=wr_subject%7C%7Cwr_content&stx=okca
에서 제공받은 게시판 소스 중 일부입니다.
</p>
<p><script>
var width_size =$(window).width();</p>
<p> $(window).resize(function (){
$('#size').val( $(window).width() + " × " + $(window).height() );
if (width_size <= 872) {
$(window).onload(function (){
var owl = $('.owl-carousel');
owl.owlCarousel({
items:2,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: true
});
});
}
else if (width_size > 872 || width_size < 1001) {
var owl2 = $('.owl-carousel');
owl2.owlCarousel({
items:3,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: true
});
}
else if(width_size >= 1001){
alert("1000ㅂ보다 큽니다");
var owl3 = $('.owl-carousel');
owl3.owlCarousel({
items:4,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: true
});
}
});
</script></p>
<p>
소스코드 목적은 화면의 가로길이가 1001보다 크면 item부분이 4,
873이상 1000이하면 item이 3,
872이하이면 item이 2로 처리하고싶은데 제대로 먹히지 않습니다..
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
5년 전
옵션으로 제어가 가능합니다. 하단과 같이 해보세요.
참고 링크:
https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html">https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html
</p>
<p>$('.owl-carousel').owlCarousel({</p>
<p>loop:true,</p>
<p>margin:10,</p>
<p>responsiveClass:true,</p>
<p>responsive:{</p>
<p> 0:{</p>
<p> items:1,</p>
<p> nav:true</p>
<p> },</p>
<p> 600:{</p>
<p> items:3,</p>
<p> nav:false</p>
<p> },</p>
<p> 1000:{</p>
<p> items:5,</p>
<p> nav:true,</p>
<p> loop:false</p>
<p> }</p>
<p>}</p>
<p>})</p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인