title: Call new parameters on a jQuery slider depending on window size
body: <p>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?</p>
  
  <pre><code>var sliderWidth = $('#testimonialSlider').width();
  
  if ($(window).width() &gt; 768) {
  
    doubleslider = $('#testimonialSlider').bxSlider({
      minSlides: 2,
      maxSlides: 2,
      slideWidth: sliderWidth / 2,
      auto: false,
      moveSlides:2,
      autoHover:true,
      pager:true
    });     
  
  } else if ($(window).width() &lt; 480) {   
      singleslider.destroySlider();
  
  } else{
    singleslider = $('#testimonialSlider').bxSlider({
      minSlides: 1,
      maxSlides: 1,
      slideWidth: sliderWidth,
      auto: false,
      moveSlides:1,
      autoHover:true,
      pager:true
    });
  }
  </code></pre>