화면 크기가 this이거나 다른 사람이 도울 수 있기를 희망하는 경우

Question

일 경우 쿼리 기능을 실행하십시오.

내 웹 사이트의 반응 형 버전을 만들고 있고 추천 기능 슬라이더에 문제가 있습니다. 그것 bxSlider 플러그인을 사용하여.

나는 위대한 기능을 가지고 있지만 아이폰이 가로 모드 인 경우 slideWidth 옵션을 변경할 수 있어야합니다. CSS를 통해 할 수있는 모든 것을 시도했습니다. 설명서를 읽으면 슬라이드 슬라이더가 수평 슬라이더에 필요하다는 것을 나타냅니다. 어떤 도움을 주시면 감사하겠습니다

...

$('.bxslider').bxSlider({ 
    minSlides: 1, 
    maxSlides: 3, 
    slideWidth: 310, 
    slideMargin: 20, 
    useCSS: false, 
    hideControlOnEnd: true, 
    infiniteLoop: false, 
    easing: 'easeOutBounce', 
    speed: 1000, 
    nextSelector: '#slider-next', 
    prevSelector: '#slider-prev', 
    nextText: '>', 
    prevText: '<', 
    pager: false 
}); 

---

참고 :

jQuery(document).ready(function ($) { 

// Variable to detect window width. 
var windowWidth = $(window).width(); 

// Trigger function for a certain window width 
if (windowWidth<568) { 
$('.bxslider').bxSlider({ 
     minSlides: 1, 
     maxSlides: 3, 
     slideWidth: XXX, 
     slideMargin: 20, 
     useCSS: false, 
     hideControlOnEnd: true, 
     infiniteLoop: false, 
     easing: 'easeOutBounce', 
     speed: 1000, 
     nextSelector: '#slider-next', 
     prevSelector: '#slider-prev', 
     nextText: '>', 
     prevText: '<', 
     pager: false 
    }); 
    } 
}); 

그러나 주요 문제는 내가 여전히를 실행해야한다는 것입니다 : 나는 다음과 같은 시도 함수를 모든 스크린 크기에서 사용하려면 변경해야하는 slideWidth 속성 일뿐입니다. 확실히 변수를 일종의 변수로 변경하는 방법이 있습니까? 올바른 용어인지 확실하지 않아 jQuery를 배우고 있습니다.

Answer 1

$(function(){ 
    var w = $(window).width(); 
    var x = // calculate box Slider width depending on w 
    $('.bxslider').bxSlider({ 
    ... 
    slideWidth: x, 
    ... 
    }); 
    $(window).resize(function(){ 
    var w = $(window).width(); 
    // whatever function to resize your slider if the window is resized (will work if the phone is turned) 
});