2

bxslider を使用した非常に基本的なスライダーがあります。

そして、bxslider 内で別のギャラリーを実行したいと思います。

このフィドルを参照してください: http://jsfiddle.net/CHELE/6/

ギャラリーの次/前をクリックすると、セカンダリ ギャラリーが常に同じ画像を返すことがわかります。なんで？他の画像が表示されるはずです。


なぜこれが起こっているのか意味がありません。以下の私のコードを見てください..

$(function () {

    var slider = $('ul#slider').bxSlider({
        infiniteLoop: true,
        controls: false,
        mode: 'horizontal',
        touchEnabled: false,
        pager: false
    });

    $('a.slide-next').click(function () {
        slider.goToNextSlide();
        return false;
    });

    $('a.slide-prev').click(function () {
        slider.goToPrevSlide();
        return false;
    });

});

$(function () {

    var gallery3 = $('#gallery3 ul.gallery').bxSlider({
        infiniteLoop: true,
        controls: false,
        mode: 'fade',
        touchEnabled: false,
        pager: false
    });

    $('#gallery3 a.gallery-next').click(function () {
        gallery3.goToNextSlide();
        return false;
    });

    $('#gallery3 a.gallery-prev').click(function () {
        gallery3.goToPrevSlide();
        return false;
    });

});


そして、これは私のマークアップです

<div class="wrapper">

    <ul id="slider">

        <li class="slide" style="background:black"></li>

        <li id="gallery3" class="slide" style="background:blue">

            <div class="gallery-wrapper">

                <ul class="gallery">

                    <li>

                        <img src="http://www.columbus-international.com/images/heroes/tour_trackday_tuscany.jpg" alt=""/>
                        <img src="http://www.wikipedy.com/images_m/motorbike_kids_s.jpg" alt=""/>

                        <img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" alt=""/>


                    </li> 

                </ul>

            </div>

            <a class="gallery-next" href="#">Gallery Next</a>
            <a class="gallery-prev" href="#">Gallery Prev</a>

        </li>

        <li class="slide" style="background:cyan"></li>
        <li class="slide" style="background:magenta"></li>

    </ul>

</div>

<a class="slide-next" href="#">Next</a>
<a class="slide-prev" href="#">Prev</a>

私のフィドルが正しく動作しない理由を誰かが理解するのを手伝ってくれますか?

前もって感謝します。


http://jsfiddle.net/CHELE/6/

4

1 に答える 1

2

デモのマークアップ (HTML) にエラーがありました:

  • ネストされたギャラリーには、唯一の直接の子として<ul class="gallery">1 つのリスト アイテムしかありませんでした。<li>ドキュメントによると

デフォルトでは、bxSlider はスライダー要素の直接の子をすべて使用します。

  • それぞれ<img>をリスト項目タグでラップする必要があります<li><img src="image.png"/></li>
  • または<li>を削除して、3<img>が の直接の子になるようにする必要があります。<ul class="gallery">
  • またはslideSelector: 'img'、 bxSlider オプションを使用すると、元のマークアップが機能します。
  • 元の画像は機能していませんでした。機能するものに置き換えられました。

HTML

    <div class="wrapper">
    <ul id="slider">
        <li class="slide" style="background:black"></li>
        <li id="gallery3" class="slide" style="background:blue">
            <div class="gallery-wrapper">
                <ul class="gallery">
                    <li>
                        <img src="http://placehold.it/720x500/000/fff.png&text=SLIDE+1"/>
                    </li>
                    <li>
                        <img src="http://placehold.it/720x500/00e/fc0.png&text=SLIDE+2"/>
                    </li>
                    <li>
                        <img src="http://placehold.it/720x500/fff/000.png&text=SLIDE+3"/>
                    </li>
                </ul>
            </div> 
            <a class="gallery-next" href="#">Gallery Next</a>
            <a class="gallery-prev" href="#">Gallery Prev</a>

        </li>
        <li class="slide" style="background:cyan"></li>
        <li class="slide" style="background:magenta"></li>
    </ul>
</div>
<a class="gallery-next" href="#">Gallery Next</a>
<a class="gallery-prev" href="#">Gallery Prev</a>

デモのスクリプト (JS(jQuery)) を改良する必要がありました。

  • $("#gallery a.gallery-next")ネストされたギャラリー JS には、 worksのような修飾子が多すぎました。$("a.gallery-next")

jQuery

$(function () {    
    var slider = $('ul#slider').bxSlider({
        infiniteLoop: true,
        controls: false,
        mode: 'horizontal',
        touchEnabled: false,
        pager: false
    });

    $('a.slide-next').click(function () {
        slider.goToNextSlide();
        return false;
    });

    $('a.slide-prev').click(function () {
        slider.goToPrevSlide();
        return false;
    });

    var gallery3 = $('ul.gallery').bxSlider({
        infiniteLoop: true,
        controls: false,
        mode: 'fade',
        touchEnabled: false,
        pager: false
    });

    $('a.gallery-next').click(function () {
        gallery3.goToNextSlide();
        return false;
    });

    $('a.gallery-prev').click(function () {
        gallery3.goToPrevSlide();
        return false;
    });

});

更新されたデモを見る

于 2015-06-24T14:50:06.367 に答える