window.innerWidth값 실시간으로 가져오기 채택완료
가방
6년 전
조회 3,472
반응형 웹사이트에 bx슬라이더를 쓰고있습니다
화면 크기에 따라 보여주는 슬라이더 갯수가 다른데요
최대3개, 최소 1개인데 화면을 가장작게 했을때 슬라이드 위치가 좀 맞지 않아
화면크기에 따라 slide갯수를 정할려고합니다
</p>
<p><script>
$(document).ready(function(){</p>
<p>var screen_width = window.innerWidth;
if(screen_width <= 600){
var max_slide = 1;
}else{
var max_slide = 3;
}</p>
<p>bx_open();</p>
<p> var slider2= $('.bxslide2').bxSlider({
auto: false,
speed:1000,
maxSlides: max_slide,
minSlides: 1,
moveSlides : 1,
stopAuto: false,
adaptiveHeight: true,
controls: true,
slideWidth: 300,
pager: false,
onSlideAfter: function() {
slider2.startAuto()
}
});
});</p>
<p></script></p>
<p>
코드는 이렇게 되어있는데요
스크린을 전체화면으로하고 다시 줄이면 max_slide 변수가 바뀌지않고 새로고침해야지 max_slide값이 바뀌네요
화면크기에 따라 새로고침없이 바로바로 변수를 바꿀려고하는데 어떻게해야하나용..
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
6년 전
우선 간단하게 제이쿼리로 브라우저 리사이징을 체크해서
적용하는 방법이 있을것 같습니다~
아래 코드를 응용해보셔요
</p>
<pre>
<script>
function mediaq(){
var windowWidth = $( window ).width();
if(windowWidth < 768) {
//브라우저 크기가 768보다 작을때 보여질 내용
} else {
//브라우저 크기가 768보다 클때 보여질 내용
}
}
//mediaq를 setResponsive에 담는다.
function setResponsive() {
mediaq();
}
//로드될때 실행
$(window).on('load', function () {
setResponsive();
});
//리사이즈될때 실행
$(window).on('resize', function () {
setResponsive();
});
</script></pre>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
가방
6년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
작은화면 - > 큰화면으로 전환할때 좀 깨져보여서요 ㅠㅠ 우선 css쪽 한번 봐야겠습니다 감사합니다.