CODEWITHSUNDEEP
jquerycarouselbxslider
Jobert Enamno
Jobert Enamno

Reputation: 4461

How to check carousel (bxslider) if active then destroy the first before initializing a new one

I'm using a sort of carousel (bxslider) from here http://bxslider.com/

I got problem if I call the slider again. The behavior of sliding the images is weird. Sometimes it moves forward sometime backward. But if it is called only once the behavior is okay. Below is my html and script. I also provided jsfiddle here

HTML

<ul class="bxslider">
  <li><img src="http://bxslider.com/images/730_200/hill_trees.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/me_trees.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
</ul>

Script

var slider=$('.bxslider').bxSlider({
  auto: true
});
slider.destroySlider();
slider.startAuto();

Upvotes: 1

Views: 3889

Answers (2)

Julien Cuenin
Julien Cuenin

Reputation: 1

I had the same issue and fixed it this way. Basically, it checks if the parent of the slider has the bx-viewport class to make sure the bxslider is loaded before to destroy it.

HTML 

<ul class="bxslider">
  <li><img src="http://bxslider.com/images/730_200/hill_trees.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/me_trees.jpg" /></li>
  <li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
</ul>

JS

var slider=$('.bxslider').bxSlider({
  auto: true
});
if (slider.parent().hasClass('bx-viewport')){
    slider.destroySlider();
    slider.startAuto();
}

Upvotes: 0

Snarkie Design
Snarkie Design

Reputation: 21

You can reload the slider like this:

slider.reloadSlider();

You can also add new options in when reloading it. See the documentation for more info.


In my case, that didn't do the job. I needed the slider to load different options responsively based on screen width. Not the cleanest or most elegant solution but here's what I did:

var slider = { };
var sliderActive = false;
var sliderSize = " ";

$(window).resize(function(){
    if($(window).width() > 740 && sliderSize != 'large') {
        if(sliderActive === true) {
            slider.reloadSlider({
                minSlides: 2,
                maxSlides: 2,
                slideWidth: 570,
                slideMargin: 30,
                controls: true,
                pager: false,
                moveSlides: 1,
                auto: true,
                onSliderLoad: function(){
                    sliderSize = 'large';
                }
            });
        } else if(sliderActive === false) {
            slider = $(".bxslider").bxSlider({
                minSlides: 2,
                maxSlides: 2,
                slideWidth: 570,
                slideMargin: 30,
                controls: true,
                pager: false,
                moveSlides: 1,
                auto: true,
                onSliderLoad: function(){
                    sliderActive = true;
                    sliderSize = 'large';
                }
            });
        } 
    } else if($(window).width() <= 740 && sliderSize != 'small') {
        if(sliderActive === true) {
            slider.reloadSlider({
                controls: true,
                pager: false,
                auto: true,
                onSliderLoad: function(){
                    sliderSize = 'small';
                }
            });
        } else if(sliderActive === false) {
            sliderActive = true;
            slider = $('.bxslider').bxSlider({
                controls: true,
                pager: false,
                auto: true,
                onSliderLoad: function(){
                    sliderActive = true;
                    sliderSize = 'small';
                }
            });
        }
    }
});

// Call window resize to fire the function on document ready
$(window).resize();

The breakpoint is 740px. The code is pretty bloated since you need to include your options twice for both reloadSlider() and bxSlider(). I'm not sure how else to do it.

Upvotes: 2

Related Questions