I've got a problem with displaying bxslider carousel.

HTML (with WP path var) before JS:

    <ul class="bxslider">
      <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="1" /></li>
      <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="2" /></li>
      <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="3" /></li>
      <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="4" /></li>
      <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="5" /></li>
      <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="6" /></li>
      <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="7" /></li>
      <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="8" /></li>
    </ul>

JS code:

    $('.bxslider').bxSlider({
      minSlides: 4,
      maxSlides: 4,
      slideWidth: 233,
      slideMargin: 0,
      controls: false,
      pager: false,
      auto: true,
      autoStart: true,
      moveSlides: 1,
      captions: true,
      infiniteLoop: true,
      onSliderLoad: function(){$('.bxslider').css('display', 'block');}
    });

After load i get slides starting from slibe №5 not №1, and after autostart with infiniteloop - it skips #1 slide and goes directly to №2

Here's the demo: /

Tried: - goToNextSlide - goToSlide

But couldn't make it, thanks a lot for help.

I've got a problem with displaying bxslider carousel.

HTML (with WP path var) before JS:

    <ul class="bxslider">
      <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="1" /></li>
      <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="2" /></li>
      <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="3" /></li>
      <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="4" /></li>
      <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="5" /></li>
      <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="6" /></li>
      <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="7" /></li>
      <li><img src="<?php echo get_template_directory_uri(); ?>/img/slides/slide1_193x142.jpg" title="8" /></li>
    </ul>

JS code:

    $('.bxslider').bxSlider({
      minSlides: 4,
      maxSlides: 4,
      slideWidth: 233,
      slideMargin: 0,
      controls: false,
      pager: false,
      auto: true,
      autoStart: true,
      moveSlides: 1,
      captions: true,
      infiniteLoop: true,
      onSliderLoad: function(){$('.bxslider').css('display', 'block');}
    });

After load i get slides starting from slibe №5 not №1, and after autostart with infiniteloop - it skips #1 slide and goes directly to №2

Here's the demo: http://olegzharov./

Tried: - goToNextSlide - goToSlide

But couldn't make it, thanks a lot for help.

• javascript
• jquery
• html
• css
• bxslider

• What is the exact problem. The slides start from number 1 - 8. WHat problem do you see? – MarsOne Commented Oct 29, 2013 at 6:47
• look perfect for me check out again.. – codebreaker Commented Oct 29, 2013 at 6:50
• Exact problem is that after load i see slide #5, not #1... – Nico4000 Commented Oct 29, 2013 at 6:55
• I don't know about bxSlider, but what do those minSlides and maxSlides` parameters mean exactly? – Mr Lister Commented Oct 29, 2013 at 10:57

4 Answers 4

1) I thought that problem was in conlict between js libraries/jQuery plugins = no

2) I thought that problem was with markup, callback = no

I looked throught generated code and found that bxSlider creates 8 additional slides with bx-clone class, so i just hacked it with

/* WRONG START SLIDE FIX */

.bx-clone {
    display: none;
}

Didn't read much about bx-clone, but after 2 days f***king with it, this solution is good for me enough.

P.S. This doesn't work properly, because hides slides in infinite loop.

So I did it that way (hiding images with css on load, and showing after load, not the container):

$(window).load(function() {

    // Slider for main page

    $('.bxslider').bxSlider({
          minSlides: 4,
          maxSlides: 4,
          slideWidth: 233,
          slideMargin: 0,
          controls: false,
          pager: false,
          auto: true,
          autoStart: true,
          moveSlides: 1,
          captions: true,
          infiniteLoop: true,
          onSliderLoad: function(){$('.bxslider li img').css('display', 'block');}
    }); 
});

I tried your code for bxslider in fiddle it works fine. But I do see it functioning differently in your demo URL.

Try one of these 2 to see if it helps :

1) startSlide option: specify the slide you wish to start with. 0 for 1st slide, 1 for 2nd and so on.

  var slider = $('.bxslider').bxSlider({
      infiniteLoop: true,
      speed: 500,
      minSlides: 4,
      startSlide:3,
      maxSlides: 4,
      slideWidth: 233,
      slideMargin: 0,
      controls: false,
      pager: false,
      auto: true,
      autoStart: true,
      moveSlides: 1,
      captions: true,
      onSliderLoad: function(){$('.bxslider').css('display', 'block');}
 });

2) goToSlide function call.

Use the slider variable. See the code above and call the function goToSlide after the images have loaded to specifically slide to the desired slide number.

slider.goToSlide(0);

Check the solution here

To prevent cloning you must set the infiniteLoop property to false.

None of these work for me, including the accepted answer. I changed the startslide to -1, and that fixed it. Not ideal, but it works.