changer le nombre de diapositives sur bxslider selon screensize

Je veux changer le nombre maximum de diapositives sur le bxslider pour quand mon écran est en dessous de 430px.

Je pouvais utiliser le ci-dessous, mais cela semble exagéré d'avoir à déclarer tout deux fois. Est-il un autre moyen que quelqu'un pourrait penser?

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

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

OriginalL'auteur Ireally Rock | 2013-04-11

  1. 18

    Vous pouvez rendre les choses moins répétitive par la définition d'une maxSlides variable, plutôt que de répéter votre curseur code.

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

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

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

    Vous pourriez faire encore plus simple avec un opérateur ternaire, mais en essayant d'obtenir trop concis n'est pas forcément un avantage.

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

var myslider = $('#my-slider').bxSlider({
    ...
    maxSlides: (width < 430) ? 1 : 4,
});
    S'il vous plaît dites-moi comment le faire fonctionner sans rechargement de la fenêtre après le redimensionnement de la fenêtre.
    bro, son très intéressant, de ses connaissances nouvelles pour moi. avant que je vois cela , j'ai toujours répéter mes codes

    OriginalL'auteur Nate

  2. 7

    Ici est un réactif solution qui vous permettra d'ajuster dynamiquement les paramètres que vous redimensionnez la fenêtre:

    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;
});
    L'ajout de la reloadSlider sur screensize changement qui rend ce beaucoup plus une option utile dans les environnements sensibles. Excellente solution, merci.

    OriginalL'auteur thdoan

  3. 0

    Je l'utilise comme ça avec 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();
 }
 });

    OriginalL'auteur Vasyl Gutnyk