2

我在显示 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');}
    });

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

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

试过： - goToNextSlide - goToSlide

但是没能成功，非常感谢帮助。

4

4 回答 4

5

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

2) 我认为问题出在标记上，回调 = 否

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

/* WRONG START SLIDE FIX */

.bx-clone {
    display: none;
}

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

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

所以我这样做了（在加载时隐藏带有 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');}
    }); 
});
于 2013-11-02T05:20:17.900 回答
0

我在小提琴中尝试了你的 bxslider 代码，它工作正常。但我确实在您的演示 URL 中看到它的功能有所不同。

试试这两种方法中的一种，看看是否有帮助：

1) startSlide选项：指定您希望开始的幻灯片。0 代表第一张幻灯片，1 代表第二张幻灯片，依此类推。

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

在这里检查解决方案

于 2013-10-29T12:29:20.620 回答
0

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

于 2014-07-15T17:49:28.383 回答
0

这些都不适合我，包括接受的答案。我将startslide更改为-1，并修复了它。不理想，但它有效。

于 2018-03-17T23:06:28.383 回答