我对bxslider转盘有问题。我尝试制作响应式web,并在js中使用resize方法。我试图通过缩小窗口宽度使滑块有2个滑块,然后有1个滑块。但是,,,,当我缩小窗口宽度时,bxslider不会改变。。。。。下面是我的代码。我搜索了很多关于这个问题的信息,人们要求放reloadSlider或destroySlider,但我不知道这个代码到底放在哪里,
var slider;
function bxslider(){
if(width>555&&width<=765){
slider=$('.bxslider2').bxSlider({
minSlides: 2,
maxSlides: 2,
slideWidth:400,
moveSlides:1
});
slider.reloadSlider();
}
if(width<=555){
var slider=$('.bxslider2').bxSlider({
minSlides: 1,
maxSlides: 1,
slideWidth:0,
moveSlides:1
});
slider.reloadSlider();
}
}
$window.on('resize',function(){
bxslider();
});
使用此代码
var slider;
function bxslider(){
var width = $(document).width();
//alert(width);
if(width>555&&width<=765){
slider=$('.bxslider2').bxSlider({
minSlides: 2,
maxSlides: 2,
slideWidth:400,
moveSlides:1
});
}
if(width<=555){
var slider=$('.bxslider2').bxSlider({
minSlides: 1,
maxSlides: 1,
slideWidth:0,
moveSlides:1
});
}
slider.reloadSlider();
}
$(window).on("orientationchange load resize", function () {
bxslider();
});
JsFiddle演示在这里
编辑:尝试放入函数滑块.reloadSlider();超出if条件。。我再次更新了答案检查。
试试这个
var slider;
function bxslider(){
if($(window).width()>555&&($(window).width()<=765){
slider=$('.bxslider2').bxSlider({
minSlides: 2,
maxSlides: 2,
slideWidth:400,
moveSlides:1
});
slider.reloadSlider();
}
if(($(window).width()<=555){
slider=$('.bxslider2').bxSlider({
minSlides: 1,
maxSlides: 1,
slideWidth:0,
moveSlides:1
});
}
}
$window.on('resize',function(){
slider.reloadSlider();
});