JQuery bxSlider problem

Question

I had a strange problem when I cannot find a solution. For one of my projects, I am using bxSlider. There are two custom buttons, prev and next to the reversal switch. All this works well, except that the slider is "re-initiated" after the first click (the next or previous one does not matter).

To do this, I use the following 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 goToSlide (index) or goToPreviousSlide () / goToNextSlide ().

A live example is shown here . Try clicking the arrows to move through the collection.

Answer 1

This will be worK:

http://pastebin.com/Psz1dDqE

var. .

Answer 2

:

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

$('#SlidePrev').click(function(){
    slider.goToPreviousSlide();
});

$('#SlideNext').click(function(){
     slider.goToNextSlide(); 
});

Answer 3

:

<script type="text/javascript">
var slider = $('.bxslider');

$(document).ready(function () {
    slider.bxSlider({
        infiniteLoop: false,
        hideControlOnEnd: true,
        pager: false,
        mode: 'fade'
    })
});

function GoToSlide(id) {
    slider.goToSlide(id);
}