我现在离开的同事为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网页上查看和研究滑块以获得一些了解。我注意到的第一件事是对.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)
}
});
这消除了对滑块变量的需要，但引入了不同的问题，从而解决了这个问题。首先，下一个和上一个按钮不起作用，因为文档说它应该，并且在页面的初始加载时，滑块未填充，也没有使用正确的文本设置下一个和上一个按钮。这就是原始onSliderLoad函数通过立即更改一个滑块来实现的。
onSlideLoad事件的第一个增强是当前滑块的索引。我还没有找到如何使用这个值正确填充滑块： 所以我做了一些关于如何使用.bxSlider方法的研究，滑块变量看起来似乎是正确的方法。 bx slider: How to continue auto sliding after clicking in default bx pager?。所以我将代码还原并取消了我的更改，但仍未找到“slider is undefined”的解决方案。 这是完整的文档就绪功能，因为它与初始问题一致：
$(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;
});
});
答案 0 :(得分：-1)
对于您的第二个（$（＆＃39;＃slider2＆＃39;）。bxSlider）解决方案，您是否尝试添加startSlide选项（，startSlide：0）以准确指定要启动的项目？
如果仍然不起作用，你可以指定你的意思吗...... ......下一个和之前的按钮不起作用，因为文档说它应该......＆＃39 ;