slider.goToNextSlide() slider is undefined bxSlider

Question

I have had an ongoing problem with some work my now departed colleague wrote for an implementation of bxSlider.
I identified the problem while I was fixing another issue with it bxSlider Stopped Working 2 Days ago with no code changes.

I am intermittently getting:

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

It's a SharePoint 2013 webpart implementation, not that that 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 started looking and studying the slider on the bxSlider webpage to gain some understanding. First thing I noticed was that the call to .bxSlider needs to be within $(document).ready(function(){. The implementation I had wasn't, so I added that around the original function. This seemed to make sense because it's intermittent it struck me that it depends on whether the DOM element for #slider2 has loaded yet. It never works on a fresh new browser on a machine that has never loaded the site before, so caching some of the page speeds the load and gets #slider2 on the page prior to this script loading, but still no difference.

So started to read the examples on the bxSlider webpage taking particular note to this example. http://bxslider.com/examples/custom-next-prev-selectors This uses a completely different technique to enable the user to click to the next or previous slide.

So I tried to redesign to follow this pattern instead.

$('#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 removes the problem by eliminating the need for the slider variable but in introduces different problems. Firstly the next and previous buttons don't work as the documentation says it should and also on initial load of the page the slider isn't populated nor is the next and previous buttons set with the correct text. This is what the original onSliderLoad function does by immediately changing the slider on one.

The first augment of the onSlideLoad event is the index of the current slider. I haven't worked out yet how to populate the slider correctly with just this value yet: So I did some more research into the how’s of using the .bxSlider method and the slider variable does seem to be the right approach. bx slider: How to continue auto sliding after clicking in default bx pager?. So I reverted the code back and undid my changes, but still haven’t found a solution for ‘slider is undefined’. This is the full document ready function as it was with the initial 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($("").text(txt.substr(0, 300)));
        $ths.append($("").text(txt.substr(300, txt.length)).hide());
        $ths.append(
            $("").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($("").text(txt.substr(0, 300)));
        $ths.append($("").text(txt.substr(300, txt.length)).hide());
        $ths.append(
            $("").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;
    });
});

slider.goToNextSlide() slider is undefined bxSlider

Answers (1)

Related Questions