window.innerWidth값 실시간으로 가져오기
본문
반응형 웹사이트에 bx슬라이더를 쓰고있습니다
화면 크기에 따라 보여주는 슬라이더 갯수가 다른데요
최대3개, 최소 1개인데 화면을 가장작게 했을때 슬라이드 위치가 좀 맞지 않아
화면크기에 따라 slide갯수를 정할려고합니다
<script>
$(document).ready(function(){
var screen_width = window.innerWidth;
if(screen_width <= 600){
var max_slide = 1;
}else{
var max_slide = 3;
}
bx_open();
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()
}
});
});
</script>
코드는 이렇게 되어있는데요
스크린을 전체화면으로하고 다시 줄이면 max_slide 변수가 바뀌지않고 새로고침해야지 max_slide값이 바뀌네요
화면크기에 따라 새로고침없이 바로바로 변수를 바꿀려고하는데 어떻게해야하나용..
답변 1
우선 간단하게 제이쿼리로 브라우저 리사이징을 체크해서
적용하는 방법이 있을것 같습니다~
아래 코드를 응용해보셔요
<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>
답변감사합니다. 전에도 resize 로 했다가 스크립트 로딩이 브라우저 속도를 못따라가는건지 몰라도
작은화면 - > 큰화면으로 전환할때 좀 깨져보여서요 ㅠㅠ 우선 css쪽 한번 봐야겠습니다 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
