изменить количество слайдов на bxslider в зависимости от настроек экрана

Question

Я хочу изменить максимальное количество слайдов на bxslider, когда мой экран ниже 430 пикселей.

Я мог бы использовать нижеследующее, но это кажется излишним, чтобы все объявить дважды. Есть ли другой способ, о котором кто-то мог подумать?

if ($(window).width() < 430) { 
    var myslider = $('#my-slider').bxSlider({ 
     ... 
     maxSlides  : 1, 
    }); 
    } 

    else { 
    var myslider = $('#my-slider').bxSlider({ 
     ... 
     maxSlides  : 4, 
    }); 
    } 

Answer 1

Вы можете сделать вещи менее повторяющимися, установив переменную maxSlides, а не повторяя свой ползунок.

var maxSlides, 
    width = $(window).width(); 

if (width < 430) { 
    maxSlides = 1; 
} else { 
    maxSlides = 4; 
} 

var myslider = $('#my-slider').bxSlider({ 
    ... 
    maxSlides: maxSlides, 
}); 

Вы могли бы сделать это еще проще с ternary operator, хотя пытаются получить слишком кратким, не обязательно выгоду.

var width = $(window).width(); 

var myslider = $('#my-slider').bxSlider({ 
    ... 
    maxSlides: (width < 430) ? 1 : 4, 
}); 

Answer 2

Вот отзывчивым решение, которое будет динамически изменять настройки при изменении размеров окна:

var slider, 
    oBxSettings = { /* Your bxSlider settings */ }; 

function init() { 
    // Set maxSlides depending on window width 
    oBxSettings.maxSlides = window.outerWidth < 430 ? 1 : 4; 
} 

$(document).ready(function() { 
    init(); 
    // Initial bxSlider setup 
    slider = $('#my-slider').bxSlider(oBxSettings); 
}); 

$(window).resize(function() { 
    // Update bxSlider when window crosses 430px breakpoint 
    if ((window.outerWidth<430 && window.prevWidth>=430) 
    || (window.outerWidth>=430 && window.prevWidth<430)) { 
    init(); 
    slider.reloadSlider(oBxSettings); 
    } 
    window.prevWidth = window.outerWidth; 
}); 

Answer 3

я использую его, как это с JQuery:

var windowWidth = $(window).width(); 
var obxSettings = {...}; 
slider.bxSlider(obxSettings); 

$(window).resize(function() { 
    windowWidth = $(window).width(); 
    if(windowWidth < 768) { 
    obxSettings.minSlides = 2; 
    slider.reloadSlider(); 
} 
else { 
    obxSettings.minSlides = 3; 
    slider.reloadSlider(); 
} 
});