javascript - slider.goToNextSlide() slider 未定义 bxSlider

Question

我现在离职的同事为 bxSlider 的实现编写的一些工作一直存在问题。
我在解决另一个问题时发现了这个问题bxSlider Stopped Working 2 Days ago with no code changes .

我间歇性地得到:

TypeError: slider is undefined   .../Pages/Home.aspx   Line 1023

这是一个 SharePoint 2013 webpart 实现，对于这个问题来说并不是真正重要的，但只是提供一些背景。

var slider= $('#slider2').bxSlider({
        auto: true,           
        controls: false,
        pager:false,
        pause: 10000,
        slideWidth: (sir ? sirina:300),
        slideHeight: 450,
        randomStart: true,
        autoHover: true,
        onSliderLoad: function (currentIndex) {
            slider.goToNextSlide();
        },

        onSlideNext: function (slide, oldIndex, newIndex)
        {
            var current = slider.getCurrentSlide();
            var id = slide[0].id;
            var prev = slide.prev();
            var next = slide.next();
            var previd = prev[0].id;
            var nextid = next[0].id;
            displayImages(id, previd, nextid)
        },

        onSlidePrev: function (slide, oldIndex, newIndex)
        {
            var current = slider.getCurrentSlide();
            var id = slide[0].id;
            var prev = slide.prev();
            var next = slide.next();
            var previd = prev[0].id;
            var nextid = next[0].id;
            displayImages(id, previd, nextid)
        }        
    });

我开始查看和研究 bxSlider 网页上的 slider 以获得一些理解。我注意到的第一件事是对 .bxSlider 的调用需要在 $(document).ready(function(){ 内。我的实现不是，所以我在原始函数周围添加了它。这似乎是有道理的，因为它是间歇性的，它取决于#slider2 的 DOM 元素是否已加载，这让我感到震惊。它永远不会在以前从未加载过该网站的机器上的全新浏览器上运行，因此缓存一些页面会加速加载并获取#slider2 在这个脚本加载之前的页面上，但仍然没有区别。

因此开始阅读 bxSlider 网页上的示例，特别注意这个示例。 http://bxslider.com/examples/custom-next-prev-selectors这使用完全不同的技术使用户能够单击下一张或上一张幻灯片。

所以我尝试重新设计以遵循这种模式。

$('#slider2').bxSlider({
        auto: true,           
        controls: false,
        pager:false,
        pause: 10000,
        slideWidth: (sir ? sirina:300),
        slideHeight: 450,
        randomStart: true,
        autoHover: true,
        nextSelector: '#leftFr',
        prevSelector: '#rightFr',

        onSlideNext: function (slide, oldIndex, newIndex)
        {
            var id = slide[0].id;
            var prev = slide.prev();
            var next = slide.next();
            var previd = prev[0].id;
            var nextid = next[0].id;
            displayImages(id, previd, nextid)
        },

        onSlidePrev: function (slide, oldIndex, newIndex)
        {
            var id = slide[0].id;
            var prev = slide.prev();
            var next = slide.next();
            var previd = prev[0].id;
            var nextid = next[0].id;
            displayImages(id, previd, nextid)
        }         
    });

这通过消除对 slider 变量的需要来解决问题，但引入了不同的问题。首先，下一个和上一个按钮不能像文档中所说的那样工作，而且在页面的初始加载时， slider 没有填充，下一个和上一个按钮也没有设置正确的文本。这就是原始 onSliderLoad 函数通过立即更改一个 slider 所做的事情。

onSlideLoad 事件的第一个扩充是当前 slider 的索引。我还没有弄清楚如何只用这个值正确填充 slider :所以我对如何使用 .bxSlider 方法做了更多研究， slider 变量似乎是正确的方法。 bx slider: How to continue auto sliding after clicking in default bx pager? .所以我恢复了代码并撤消了我的更改，但仍然没有找到“ slider 未定义”的解决方案。这是完整的文档就绪功能，就像最初的问题一样:

$(document).ready(function () {

    $("iframe").contents().find(".timeline").css("background", 'rgba(0,0,0,0)');
    changeFeeds();
    var t2 = JSVar;
    var sirina = w;
    var dolzina = h;
    var sir=false;
    var dol=false;

    //read more...starts
    var MORE = "... More...", LESS = " Less...";
    $(".moreAdHoc").each(function () {

        var $ths = $(this),
        txt = $ths.text();
        var p = $ths.find('.pid');
        var idValue = p.text();
        $ths.text("");            
        $ths.append($("<span>").text(txt.substr(0, 300)));
        $ths.append($("<span>").text(txt.substr(300, txt.length)).hide());
        $ths.append(
            $("<a class=morelink onclick=openNewsContent(" + idValue + ")>").text(MORE).click(function () {
                var $ths = $(this);
                if ($ths.text() == MORE) { }
                else {
                    $ths.prev().hide();
                    $ths.text(MORE);
                }
            })
        );
    });

    $(".moreWhatsNew").each(function () {

        var $ths = $(this),
        txt = $ths.text();
        var p = $ths.find('.pwhatsNewid');
        var p1 = $ths.find('.pwhatsNewSite');
        var idValue = p.text();
        var siteValue = p1.text();
        $ths.text("");           
        $ths.append($("<span>").text(txt.substr(0, 300)));
        $ths.append($("<span>").text(txt.substr(300, txt.length)).hide());
        $ths.append(
            $("<a class=morelink onclick=openWhatsNewNewsContent(" + idValue + ",'" + siteValue + "')>").text(MORE).click(function () {
                var $ths = $(this);
                if ($ths.text() == MORE) { }
                else {
                    $ths.prev().hide();
                    $ths.text(MORE);
                }
            })
        );
    });
    //read more...ends

    var slider= $('#slider2').bxSlider({
        auto: true,           
        controls: false,
        pager:false,
        pause: 10000,
        slideWidth: (sir ? sirina:300),
        slideHeight: 450,
        randomStart: true,
        autoHover: true,
        onSliderLoad: function (currentIndex) {
            slider.goToNextSlide();
        },

        onSlideNext: function (slide, oldIndex, newIndex)
        {
            var current = slider.getCurrentSlide();
            var id = slide[0].id;
            var prev = slide.prev();
            var next = slide.next();
            var previd = prev[0].id;
            var nextid = next[0].id;
            displayImages(id, previd, nextid)
        },

        onSlidePrev: function (slide, oldIndex, newIndex)
        {
            var current = slider.getCurrentSlide();
            var id = slide[0].id;
            var prev = slide.prev();
            var next = slide.next();
            var previd = prev[0].id;
            var nextid = next[0].id;
            displayImages(id, previd, nextid)
        }        
    });

    $('.pronext').click(function () {
        slider.goToNextSlide();            
        return false;
    });


    $('.proprev').click(function () {
        slider.goToPrevSlide();
        return false;
    });

    $('#rightFr').click(function () {
        slider.goToNextSlide();
        return false;
    });

    $('#leftFr').click(function () {
        slider.goToPrevSlide();
        return false;
    });
});

Answer 1

对于您的第二个 ( $('#slider2').bxSlider ) 解决方案，您是否尝试添加 startSlide 选项 (, startSlide: 0) 以准确指定从哪个项目开始？

如果仍然不起作用，您能否具体说明“...下一个和上一个按钮不起作用，正如文档中所说的那样...”