창 크기에 따라 jQuery 슬라이더에서 새 매개 변수를 호출하십시오.

Question

bxslider.js를 사용하여 내 페이지에서 슬라이더를 만듭니다. 내 사이트가 반응 적이기 때문에, 내가 가지고있는 코드는 윈도우 크기에 따라 슬라이더에 다른 매개 변수를 허용합니다. 예를 들어, 창이 768px 이상이면 슬라이더에 2 개의 슬라이드가 표시됩니다. 768보다 작 으면 1 슬라이드를 표시하고 480보다 작 으면 슬라이더 기능이 완전히 중지됩니다. 이 모든게 잘 작동합니다. 그러나 그것은 단지로드에서 작동합니다. 크기 조정도하고 싶습니다. 나는 window.resize 함수를 사용하여 놀았지만, 실제로 무엇을하는지, 또는 이것을 수행하는 가장 좋은 방법은 무엇인지를 알 수있는 프로그래밍 배경이 충분하지 않습니다. 아무도로드 및 크기 조정에서 작동하도록하는 방법을 말해 줄 수 있습니까?

var sliderWidth = $('#testimonialSlider').width(); 

if ($(window).width() > 768) { 

    doubleslider = $('#testimonialSlider').bxSlider({ 
    minSlides: 2, 
    maxSlides: 2, 
    slideWidth: sliderWidth/2, 
    auto: false, 
    moveSlides:2, 
    autoHover:true, 
    pager:true 
    });  

} else if ($(window).width() < 480) { 
    singleslider.destroySlider(); 

} else{ 
    singleslider = $('#testimonialSlider').bxSlider({ 
    minSlides: 1, 
    maxSlides: 1, 
    slideWidth: sliderWidth, 
    auto: false, 
    moveSlides:1, 
    autoHover:true, 
    pager:true 
    }); 
} 

Answer 1

window.load 기능뿐만 아니라 window.resize() 함수에도 코드를 포함해야합니다. 여기

내가의 setTimeout 기능을 이용하여 반복적 인 window.resize 호출을 제거하기 위해 노력했다

this solution을 확인합니다. destroySlider를 실행 한 후에도 슬라이더 객체가 포함 된 변수는 null로 설정되지 않습니다. 따라서 슬라이더 개체 가용성을 확인하는 코드도 추가되었습니다. 코드를 그대로 사용하거나 요구 사항에 맞게 미세 조정할 수 있습니다.

var sliderWidth,slider,id; 

    $(window).resize(function() { 
    clearTimeout(id); 
    id = setTimeout(sliderResize, 1000); //settimeout to invoke resize just once 
    }); 

    $(window).load(function() { 
    sliderResize(); //Same function invoked during window.load and resize 
    }); 

function sliderResize(){ 
    sliderWidth = $('.bxslider').width(); 

    if ($(window).width() > 768) { 
     /* check if slider object is set, else multiple sliders are created*/ 
     if(slider == null || slider == undefined){  
     slider = $('.bxslider').bxSlider({ 
     minSlides: 2, 
     maxSlides: 2, 
     slideWidth: sliderWidth/2, 
     auto: false, 
     moveSlides:2, 
     autoHover:true, 
     pager:true 
     }); 
     } 
     else{ //else just reload the existing slider with new parameters 
     slider.reloadSlider({ 
     minSlides: 2, 
     maxSlides: 2, 
     slideWidth: sliderWidth/2, 
     auto: false, 
     moveSlides:2, 
     autoHover:true, 
     pager:true 
     }); 
     } 

    } else if ($(window).width() < 480) { 
     /* destroy the slider only if already created*/ 
     if(slider != null || slider != undefined){ 
      slider.destroySlider(); 
     } 
    } else{ 
     /* check if slider object is set, else multiple sliders are created*/ 
     if(slider == null || slider == undefined){ 
     slider = $('.bxslider').bxSlider({ 
     minSlides: 1, 
     maxSlides: 1, 
     slideWidth: sliderWidth, 
     auto: false, 
     moveSlides:1, 
     autoHover:true, 
     pager:true 
     }); 
     } else{ 
     slider.reloadSlider({ 
     minSlides: 1, 
     maxSlides: 1, 
     slideWidth: sliderWidth, 
     auto: false, 
     moveSlides:1, 
     autoHover:true, 
     pager:true 
     }); 
     } 
    } 
    } 

Answer 2

함수 슬라이더() { VAR sliderWidth = $ ('#의 testimonialSlider')의 폭().;

if ($(window).width() > 768) { 

doubleslider = $('#testimonialSlider').bxSlider({ 
    minSlides: 2, 
    maxSlides: 2, 
    slideWidth: sliderWidth/2, 
    auto: false, 
    moveSlides:2, 
    autoHover:true, 
    pager:true 
});  

} else if ($(window).width() < 480) { 
    singleslider.destroySlider(); 


} else{ 

    singleslider = $('#testimonialSlider').bxSlider({ 
    minSlides: 1, 
    maxSlides: 1, 
    slideWidth: sliderWidth, 
    auto: false, 
    moveSlides:1, 
    autoHover:true, 
    pager:true 
}); 
}; 
}; 

$(window).load(function() { 
slider(); 
}); 

$(document).resize(function() { 
slider(); 
});