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

ロード後、スライドは№1ではなく№5から始まり、無限ループで自動開始した後、＃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

infiniteLoop複製を防ぐには、プロパティを に設定する必要がありますfalse。

于 2014-07-15T17:49:28.383 に答える
0

受け入れられた答えを含め、これらのどれも私にとってはうまくいきません。スタートスライドを-1に変更したところ、修正されました。理想的ではありませんが、機能します。

于 2018-03-17T23:06:28.383 に答える