CODEWITHSUNDEEP
javascriptjquerybxslider
Ryan Swanson
Ryan Swanson

Reputation: 390

Call new parameters on a jQuery slider depending on window size

I am using bxslider.js to make a slider on my page. Since my site is responsive, the code I have allows different parameters for the slider depending on the size of the window. For example, when the window is over 768px the slider shows 2 slides. When it is under 768 it shows 1 slide and when it's under 480, the slider function stops completely. All this works fine. However it only works on load. I want it to work on resize too. I've played around the the window.resize function, but I don't have enough of a programing background to really know what I am doing or what the best way to do this is. Can anyone tell me how to get this to work both on load and on 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
  });
}

Upvotes: 1

Views: 394

Answers (2)

VJS
VJS

Reputation: 1017

You need to include your code not just on window.load function but also on window.resize() function.

Here check this solution

I have tried to eliminate repetitive window.resize call by using setTimeout function. Also even after you destroySlider, the variable containing the slider object is not set to null. Hence added code to check the slider object availability too. You can use the code as is or fine tune it further to suit your requirements. 

  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
         });
       } 
     }
    }

Upvotes: 2

Gega Gagua
Gega Gagua

Reputation: 92

function slider(){ 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
});
};
};

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

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

Upvotes: 0

Related Questions