Question

Hi guys I am using the jquery bxslider plugin, and for some reason it shows random slides, it doesn’t start at one, and sometimes it will show the first slide multiple times, and some slides never?

I am using very simple code, I have not edited the .js files you can see it in working (..working but random slides) on viifit.com

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){
   $('#slider1').bxSlider();
 });

 $(function(){
 var slider = $('#slider1').bxSlider({
  controls: false
 });

 $('#go-prev').click(function(){
 slider.goToPreviousSlide();
 return false;
 });

 $('#go-next').click(function(){
 slider.goToNextSlide();
return false;
 });
});

$(function(){
$('#slider1').bxSlider({
auto: true,
autoControls: false
});
}); 
</script>

<div id="slider1">
<div><img src="slide1.png"></div>
<div><img src="slide2.png"></div>
<div><img src="slide3.png"></div>
<div><img src="slide4.png"></div>
</div>

Answer 1

There is so much wrong with your script, it’s crazy.

Try this:

$(document).ready(function(){

    var slider = $('#slider1').bxSlider({
        controls: false,
        auto:true,
        autoControls: false
    });

    $('#go-prev').click(function(){
        slider.goToPreviousSlide();
        return false;
    });

    $('#go-next').click(function(){
        slider.goToNextSlide();
        return false;
    });
});

Can’t test this locally right now, but it should work.