0

I'm trying to set up a function so that when the user resizes their window, the slider is emptied and then re-implemented based on the size of the window.

The problem that I have is that the slider IS being re-implemented, but with without slides.

The code I'm using is:

var newdiv = $('<div class="slider1" />');
        $(window).resize(function(){
            $("#featured").empty();
            $("#featured").append(newdiv);
            if($(window).width() > 640){
                $('.slider1').bxSlider({
                  slideWidth: 1200,
                   minSlides: 4,
                   maxSlides: 4,
                   slideMargin: 10,
                   pager: false
                });

            }else if($(window).width() > 480 && $(window).width() < 640){
                $('.slider1').bxSlider({
                  slideWidth: 800,
                   minSlides: 3,
                   maxSlides: 3,
                   slideMargin: 10,
                   pager: false
                });
            }else if($(window).width() < 480){
                $('.slider1').bxSlider({
                  slideWidth: 500,
                   minSlides: 2,
                   maxSlides: 2,
                   slideMargin: 10,
                   pager: false
                });
            }
        });

If someone can either tell me what I'm doing wrong, or show me a better way of making this work, that'd be great. Thanks!

Brant Barton
  • 458
  • 6
  • 18

3 Answers3

3

I think you are emptying your slider content, so it will display nothing.

Instead of emptying and redefining it you can destroy an reinit the bxSlider control.

Code:

slider.destroySlider();
slider = $('.bxslider').bxSlider({
    slideWidth: 500,
    minSlides: 2,
    maxSlides: 2,
    slideMargin: 10,
    pager: false
});

Demo: http://jsfiddle.net/IrvinDominin/pjWjy/

This resize can cost a bit instead of resize you can build your resize end event: JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

Community
  • 1
  • 1
Irvin Dominin
  • 30,819
  • 9
  • 77
  • 111
0

You are describing something i answered here

[collapsing bxslider when element style"display:none"

The bxslider shows the nav controls but not the slides. The is resolved by calling slider1.reloadSlider()

The important thing to remember is you have to capture and keep a reference to your slider when you first create it. 

$('.slider1').bxSlider()

can not be used to get a reference to your slider. it will create a new slider everytime.

try assigning this to a variable and then using that variable to .append() and .reloadSlider() as needed. 

//initial creation
myslider =  $('.slider1').bxSlider(options);

//then in the resize() event handler...
myslider.reloadSlider();

good luck

Community
  • 1
  • 1
greg
  • 1,673
  • 1
  • 17
  • 30
0

i might have found a strange solution for this, and would like others to confirm if it works for them.

first initialize the slider in document ready and add the resize call.

<script>
var myslide; 
$(document).ready(function(){
myslide= $('.bxslider').bxSlider({
  mode: 'horizontal',
  captions: false,
  controls : false,
  pause:5000,
  auto:true
});
});

$(window).resize(function(){
    console.log(myslide.getCurrentSlide());
  });

</script>

i resized the window and the slider continues to work, it seems that when you interact with the slider variable, it knocks it back on its feet.

user1708899
  • 21
  • 1