bxSlider: changes order of li elements

Question

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.com/

Tried: - goToNextSlide - goToSlide

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

Answer 1

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');}
    }); 
});