Change the # of image in bx slider on window resize

Question

I am using bx slider but the problem is that when i resize the window, the images in slider should change according to window size..

I have tried the below code and it works but every time I have to reload the page, can anybody help me please. And thanks in advance.

<script type="text/javascript">
   if ($(window).width() < 480 ) {  
       $(document).ready(function(){
       $('#slider1').bxSlider({
    slideWidth: 280,
    minSlides: 2,
    maxSlides: 2,
    startSlide: 0,
    slideMargin: 10
      });
        });
   }

   else if ($(window).width() > 480 ) {

$(document).ready(function(){
$('#slider1').bxSlider({
   slideWidth: 280,
   minSlides: 4,
   maxSlides: 4,
   startSlide: 0,
   slideMargin: 10
  });
});
    }
else {
$(document).ready(function(){
  $('#slider1').bxSlider({
  slideWidth: 280,
  minSlides: 4,
  maxSlides: 4,
  startSlide: 0,
  slideMargin: 10
 });
});
}           
</script>

Answer 1

First make put your slider into a var (better for later "reloadSlider"), then make your life easier by creating var-s for your settings (since you will need them at least twice).

Finally you need a $( window ).resize function.

See if it works (I didn't test it but should work since I have just completed mine - kind of more complicated to show it).

Try this (by the way, I see that 'medium' and 'big' sizes have same settings...):

<script type="text/javascript">
   var slider;

   var defsOne   = { slideWidth: 280, minSlides: 2, maxSlides: 2, startSlide: 0, slideMargin: 10 }
   var defsTwo   = { slideWidth: 280, minSlides: 4, maxSlides: 4, startSlide: 0, slideMargin: 10 }
   var defsThree = { slideWidth: 280, minSlides: 4, maxSlides: 4, startSlide: 0, slideMargin: 10 }
   var myDefs = {};

   $(document).ready(function(){
       if ($(window).width() < 480 ) {  
           myDefs = defsOne;
       }

       else if ($(window).width() > 480 ) {
           myDefs = defsTwo;
       }
       else {
           myDefs = defsThree;
       }
       slider = $('#slider1').bxSlider(myDefs);
   });


   $( window ).resize(function() {
       var ww = $(window).width();
       if ($(window).width() < 480 ) {  
           myDefs = defsOne;
       }

       else if ($(window).width() > 480 ) {
           myDefs = defsTwo;
       }
       else {
           myDefs = defsThree;
       }

       slider.reloadSlider( myDefs );

   });

</script>

Actually I would not slider.reloadSlider() at every resize (at every window pixel change), put somewhere a flag to check if size really changed from previously used one and only then do the reload:

if ( sizeReallyChanged ) {
    slider.reloadSlider( myDefs );
}

If you don't you are going to reload it tons of times ...

Of some extra-help could be setting an object for "global settings" - since yours are all almost the same an then :

var defsGlobal = { slideWidth: 280, startSlide: 0, slideMargin: 10 }
var defsOne    = { minSlides: 2, maxSlides: 2 }
var defsTwo    = { minSlides: 4, maxSlides: 4 }

and finally "connect" all of them (of in the right place ie 'if'):

...
   wholeDefs = $.extend( {} , defsOne, defsGlobal);
...
   slider = $('#slider1').bxSlider(wholeDefs);
...

Hope this could help, Bye nIc