Question

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

在JS之前的

HTML（使用WP路径var）：

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

加载后我从slibe№5开始获得幻灯片而不是№1，并且在使用infiniteloop自动启动后 - 它跳过＃1幻灯片并直接进入№2

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

尝试： - goToNextSlide - goToSlide

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

Answer 1

1）我认为问题是在js libraries / jQuery plugins = no

之间造成的

2）我认为问题出在markup，callback = no

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

攻击它

/* WRONG START SLIDE FIX */

.bx-clone {
    display: none;
}

没有读过很多关于bx-clone的信息，但是用了2天后，这个解决方案对我来说已经足够了。

P.S。这不能正常工作，因为隐藏了无限循环幻灯片。

所以我这样做了（在加载时隐藏带有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');}
    }); 
});

Answer 2

我在小提琴中尝试了bxslider的代码，但它运行正常。但我确实在您的演示网址中看到它的功能不同。

尝试其中一项，看看是否有帮助：

1） startSlide 选项：指定您要开始的幻灯片。 0表示第1张幻灯片，1表示第2张，依此类推。

  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 函数调用。

使用滑块变量。请参阅上面的代码并在加载图像后调用函数goToSlide以专门滑动到所需的幻灯片编号。

slider.goToSlide(0);

检查解决方案here

Answer 3

要防止克隆，您必须将infiniteLoop属性设置为false。

Answer 4

这些都不适合我，包括已接受的答案。我将startlide更改为-1，并修复了它。不理想，但它的工作原理。

bxSlider：更改li元素的顺序

4 个答案: