CODEWITHSUNDEEP
javascriptjquerybxslider
Brant Barton
Brant Barton

Reputation: 458

bxSlider not showing slides on resize

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!

Upvotes: 0

Views: 5513

Answers (3)

user1708899
user1708899

Reputation: 21

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.

Upvotes: 0

greg
greg

Reputation: 1873

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

Upvotes: 0

Irvin Dominin
Irvin Dominin

Reputation: 30993

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?

Upvotes: 3

Related Questions