slider.goToNextSlide() 滑块未定义 bxSlider
Posted
技术标签:
【中文标题】slider.goToNextSlide() 滑块未定义 bxSlider【英文标题】：slider.goToNextSlide() slider is undefined bxSlider 【发布时间】：2014-06-09 16:43:58 【问题描述】：我现在离职的同事为实现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?。所以我恢复了代码并撤消了我的更改，但仍然没有找到“滑块未定义”的解决方案。 这是完整的文档准备功能，就像最初的问题一样：
$(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;
);
);
【问题讨论】：
【参考方案1】：对于您的第二个 ( $('#slider2').bxSlider ) 解决方案，您是否尝试过添加 startSlide 选项 (, startSlide: 0) 以准确指定要从哪个项目开始？
如果这仍然不起作用，您能否指定您所说的“...下一个和上一个按钮不起作用，因为文档说它应该...”
【讨论】：
请使用 cmets 询问更多信息，而不是发布问题作为答案。以上是关于slider.goToNextSlide() 滑块未定义 bxSlider的主要内容，如果未能解决你的问题，请参考以下文章