javascript - bxSlider:改变 li 元素的顺序

Question

我在显示 bxslider 轮播时遇到了问题。

JS 之前的 HTML(带有 WP 路径变量):

    <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代码:

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

加载后我得到的幻灯片是从 5 号而不是 1 号开始的，并且在使用无限循环自动启动后 - 它跳过 1 号幻灯片并直接转到 2 号

这是演示: http://olegzharov.com/

试过:- 转到下一张幻灯片- 转到幻灯片

但无法成功，非常感谢您的帮助。

Answer 1

1) 我认为问题出在 js 库/jQuery 插件之间的冲突 = 否

2) 我认为问题出在标记上，callback = no

我查看了生成的代码，发现 bxSlider 使用 bx-clone 类创建了 8 个额外的幻灯片，所以我只是用

/* WRONG START SLIDE FIX */

.bx-clone {
    display: none;
}

没有读太多关于 bx-clone 的内容，但是在使用它 2 天后，这个解决方案对我来说已经足够了。

附言这不能正常工作，因为在无限循环中隐藏了幻灯片。

所以我这样做了(加载时用 css 隐藏图像，加载后显示，而不是容器):

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