0

ビューポートで 3 つの項目を持つ bx スライダーを使用しています。アクティブなリスト項目 (この場合は中央の子) の css クラスが必要ですが、機能していません。

HTML と JavaScript は次のとおりです。

        <ul class="bxslider" id="slider1">
               <li><img src="img/img-a.png" />

              </li>
              <li><img src="img/img-b.png" />

              </li>
              <li><img src="img/img-c.png" />

              </li>

        </ul>


<script type="text/javascript">
    $(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>
<script type="text/javascript">
onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
    $('#slider1 li').removeClass('active-slide');   
    $('#slider1>li').eq(currentSlideHtmlObject + 1).addClass('active-slide')
//     $('#sddf').html('<p class="check">Slide index ' + currentSlide + ' of ' + totalSlides + ' total slides has completed.');
}

そしてCSS：

#slider1 li{ 
   opacity:0.5;
   width:290px;
}


#slider1 .active-slide{
  opacity:1;
}

編集： JSFIDDLE

4

1 に答える 1

3

bxslider に関する SO の問題はあまりありません。私はあなたの質問について多くの調査を行い、解決策を得ましたが、私の心にはいくつかの疑問もあります. 説明させてください

  1. ウェブ上には bxslider のリソースやデモがほとんどありません。
  2. Web サイト自体にはいくつかのデモがリストされていますが、ソース コードや適切なチュートリアルは提供されていません。
  3. 私が得た解決策は、ウェブサイトで規定されているものとは異なるコールバックを使用しています。面白いことに、ウェブサイトのコールバック メソッドが機能しません。

わかりましたので、ここに私が行った変更があります。

  1. <ul>中に封入<div>。
  2. にいくつかの変更を加えましたCSS。
  3. の主要部分を変更しましたJquery。

HTML と CSS の変更はごくわずかであるため、ここでは Jquery のみを貼り付けます。完全な変更と実際のソリューションを確認するには、このフィドルを確認してください。

作業ソリューション。

白黒効果のあるソリューション

$(document).ready(function () {
    $('#slider').bxSlider({
        auto: true,
        pause: 2000,
        autoHover: true,
        controls: false,
        displaySlideQty: 3,
        moveSlideQty: 1,
        onAfterSlide: function (currentSlide, totalSlides, currentSlideHtmlObject) {
            var $middleSlide = currentSlide + 2;
            $('#slider li').css({
                opacity: 0.2
            });
            $('#slider li:eq(' + $middleSlide + ')').animate({
                opacity: 1
            }, 100);
        }
    });

});

ご覧のとおり、私が行った大きな変更は、 li にクラスを追加するのではなく、opacityjquery を介して直接変更することです。

また、私が使用しているコールバックは'onAfterSlide'です。「onSlideAfter」コールバックは私には適していません。代わりに「onAfterSlide」を試してみましたが、これは機能します。

編集：私はこの問題についてもう少し調べました。私が参照している bxslider スクリプト ファイルは古い 3.0 バージョンであるため、コールバックが異なっていたことがわかりました。最新バージョンは 4.1.1 で、サイトに記載されているコールバックはこのバージョンで動作します。

それはすべて少し混乱しており、これを明確にするためのドキュメントはウェブサイトにあまりありません. これは、bxslider の新しいバージョンへの外部リンクです。

http://bxslider.com/lib/jquery.bxslider.min.js

于 2013-08-21T12:15:13.610 に答える