jQuery bxSlider issue

Question

I´m facing a strange problem where I can´t seem to find a solution for. For one of my projects I´m using bxSlider. There are two custom buttons, prev and next to toggle the sliding. This all works well except for the slider to 're-initiate' after the first click (next or prev doesn't matter).

For this I'm using these functions:

$('#Slider2').bxSlider({
        auto: false,  
        speed: 1000,
        mode: 'horizontal'
    });

    $('#SlidePrev').click(function(){
        var slider  = $('#Slider2').bxSlider();
        var slideNr = slider.getCurrentSlide() - 1;

        //slider.goToSlide(slideNr);
        slider.goToPreviousSlide();

    });

    $('#SlideNext').click(function(){
        var slider  = $('#Slider2').bxSlider();
        var slideNr = slider.getCurrentSlide() + 1;

        slider.goToSlide(slideNr); 
    });

It doesn't matter if I use the function goToSlide(index) or goToPreviousSlide()/goToNextSlide().

A live example can be found here. Try to click the arrows to slide through the collection.

Answer 1

This will worK:

http://pastebin.com/Psz1dDqE

you need to get the return of your initial set up into the var slider. do not create a new one.