창크기에 따른 제이쿼리를 다르게 적용하고싶습니다.
본문
https://sir.kr/g5_skin/25206?sfl=wr_subject%7C%7Cwr_content&stx=okca
에서 제공받은 게시판 소스 중 일부입니다.
<script>
var width_size =$(window).width();
$(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>
소스코드 목적은 화면의 가로길이가 1001보다 크면 item부분이 4,
873이상 1000이하면 item이 3,
872이하이면 item이 2로 처리하고싶은데 제대로 먹히지 않습니다..
답변 1
옵션으로 제어가 가능합니다. 하단과 같이 해보세요.
참고 링크:
https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:5,
nav:true,
loop:false
}
}
})
답변을 작성하시기 전에 로그인 해주세요.
