CODEWITHSUNDEEP
javascriptjquerybxslider
mubashermubi
mubashermubi

Reputation: 9256

JQuery Don't work after using BxSlider plugin

I am using BxSlider plugin of jQuery in my page, but it behaves very strange, when I use this code to make slider using BxSlider only the slider works nothing else work even my custom functions. Meaning all the other functions stop working without throwing errors in console. I am stuck! I have tried many things but no success, Is there anything wrong my this BxSlider code or something else?

Code for my BxSlider is:

var perLink = jQuery('#qc-per');
var nextLink = jQuery('#qc-next');
var CustomPager = jQuery('#qc-custom-pager');
var BxSlider;
var ActualPager;
window.onload = function() {
    console.log('ready');
    BxSlider = jQuery('.bxslider').bxSlider({
        infiniteLoop: false,
        touchEnabled: true,
        pager: true,
        pagerType: 'short',
        pagerShortSeparator: ' de ',
        nextText: 'SIGUIENTE',
        prevText: 'ANTERIOR',
        hideControlOnEnd: true,
        slideWidth: 690,
        adaptiveHeight: true,
        autoControls: true, 
        onSlideAfter: function (slideElement, oldIndex, newIndex) {
            var total = BxSlider.getSlideCount();
            var current = newIndex + 1;
            if (total == current) {
                nextLink.css('visibility', 'hidden');
            } else {
                nextLink.css('visibility', 'visible');
            }
            if (current <= 1) {
                perLink.css('visibility', 'hidden');
            } else {
                perLink.css('visibility', 'visible');
            }
            CustomPager.text(ActualPager.text());
        }
    });

    ActualPager = jQuery('.bx-default-pager');
    CustomPager.text(ActualPager.text());
    perLink.css('visibility', 'hidden');

}
function doNext() {
    BxSlider.goToNextSlide();
}
function doPerv() {
    var slideNr = BxSlider.getCurrentSlide() - 1;
    BxSlider.goToSlide(slideNr);
}

I have included the "jquery.bxslider.js" also, but the other functions stops working only if I use/insert the above code to make the slider. I am using jquery-1.11.3.min.js and BxSlider v4.1.2. Also I have Mootools in the site too.

Thank you and please let me know if my question is not clear.

Upvotes: 1

Views: 457

Answers (1)

mubashermubi
mubashermubi

Reputation: 9256

After spending 2 days on the same code and same page I found that the first slide of BxSlider was replecating all the page in it everytime and it was causing the js libraries load again within each time slider load.

The first slide or BxSlider was looking something like

<img src="...." >WHOLE PAGE WAS LOADING AGAIN IN IT WAS CAUSING PROBLEM</img>

I still do not know if its a bug of BxSlider or due to my both libraries, I a using Mootools and Jquery at the same time due to some reasons.

To resolve this I used 

window.onload = function() {
  //CODE ------
}

Instead of 

jQuery(document).ready(function () {
  //CODE ------
});

I hope it will help someone.

Upvotes: 1

Related Questions