JQuery 使用 BxSlider 插件后不工作

Question

我在我的页面中使用了 jQuery 的 BxSlider 插件，但它的行为很奇怪，当我使用此代码使用 BxSlider 制作滑块时，只有滑块起作用，即使我的自定义函数也不起作用。这意味着所有其他功能都停止工作而不会在控制台中抛出错误。我卡住了！我尝试了很多东西但没有成功，我的这个 BxSlider 代码有什么问题吗？

我的 BxSlider 代码是：

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);
}

我也包含了 "jquery.bxslider.js"，但是只有当我 use/insert 上面的代码制作滑块时，其他功能才会停止工作。我正在使用 jquery-1.11.3.min.js 和 BxSlider v4.1.2。我在网站上也有 Mootools。

谢谢，如果我的问题不清楚，请告诉我。

Answer 1

在同一代码和同一页面上花费 2 天后，我发现 BxSlider 的第一张幻灯片每次都在重复其中的所有页面，并且它导致 js 库在每次滑块加载时再次加载。

第一张幻灯片或 BxSlider 看起来像

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

我仍然不知道这是 BxSlider 的错误还是由于我的两个库，由于某些原因我同时使用了 Mootools 和 Jquery。

为了解决这个问题，我使用了

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

而不是

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

希望对大家有所帮助。

JQuery 使用 BxSlider 插件后不工作

JQuery Don't work after using BxSlider plugin

javascript

jquery

bxslider