I had a persistent problem with some work that my recalled colleague wrote to implement bxSlider .
I identified the problem while I fixed another problem with it bxSlider Stopped Working 2 days ago without changing the code .
I get intermittently:
TypeError: slider is undefined .../Pages/Home.aspx Line 1023
This is an implementation of the SharePoint 2013 web part, not what really matters for this problem, but just give some background.
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) } });
I began to search and study the slider on the bxSlider web page to get some insight. The first thing I noticed was that the .bxSlider call should be within $ (document) .ready (function () {. There was no implementation that I had, so I added this around the original function. It seemed to me intermittently that it depends on whether the DOM element is loaded for # slider2. It never works in a new new browser on a machine that has never loaded the site before, so caching some pages speeds up loading and gets # slider2 on the page before the script loads, but still no difference.
So, I started reading examples on the bxSlider web page, especially considering this example. http://bxslider.com/examples/custom-next-prev-selectors This uses a completely different method, allowing the user to click on the next or previous slide.
So, I tried redesigning to follow this pattern.
$('#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) } });
This fixes the problem by eliminating the need for a variable slider, but introduces various problems. Firstly, the following and previous buttons do not work, because the documentation says that it is necessary, and when loading the page, the slider is not filled, and the next and previous buttons with the correct text are not displayed. This is what the original onSliderLoad function does, immediately changing the slider to one.
The first addition to the onSlideLoad event is the index of the current slider. I have not yet developed how to properly populate the slider with this value: So I did some more research into using the .bxSlider method, and the slider variable seems to be the right approach. Slider bx: how to continue automatic sliding after clicking on the default pager pager bx? . So I put the code back and disabled my changes, but still havent found a solution for the "slider" undefined. This is a complete document ready function, just like the original problem:
$(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; }); });