0

Bootstrap カルーセルとモーダルを使用して単純なライトボックスを作成しようとしています。ここにあるサンプルファイルを見てください。

私がやりたいことは、モーダル カルーセルをメイン カルーセルの同じスライド (現在のスライド) として開始することです。モーダルを開始する例からわかるように、最初の項目から開始するだけですが、現在アクティブなスライドから開始する必要があります。

これを行う方法を教えてください。

<div class="container">
<div class="well span9 columns">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <a href=".bell" data-toggle="modal"><img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt=""/></a>
            </div>
            <div class="item">
                <img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt=""/>
            </div>
            <div class="item">
                <img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg" alt=""/>
            </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹&lt;/a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">›&lt;/a>
    </div>
    <!-- Modal -->
    <div id="bell" class="modal hide fade bell" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Modal header</h3>
        </div>
        <div class="modal-body">
            <div id="myCarousel2" class="carousel slide">
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt=""/>
                    </div>
                    <div class="item">
                        <img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt=""/>
                    </div>
                    <div class="item">
                        <img src="http://bootstrapdocs.com/v2.0.3/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg" alt=""/>
                    </div>
                </div>
                <a class="left carousel-control" href="#myCarousel2" data-slide="prev">‹&lt;/a>
                <a class="right carousel-control" href="#myCarousel2" data-slide="next">›&lt;/a>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
    </div>
    <div class="btn-group" data-toggle="buttons-radio">
        <button type="button" class="btn btn-inverse"><a href=".bell" data-toggle="modal"><i class="icon-resize-full icon-white"></i></a>
        </button>
    </div>
</div>

ありがとう

4

1 に答える 1

1

これはうまくいくようです。

$('.bell').on('show', function() {
    var targetSlide = parseInt($('#myCarousel .active').index('#myCarousel .item'));
    $('#myCarousel2').carousel(targetSlide);
});

これにより、メイン カルーセルに表示されている現在のインデックスが取得されます。

$('#myCarousel .active').index('#myCarousel .item')

これにより、モーダル カルーセルの現在のスライドが設定されます。

$('#myCarousel2').carousel(/*Number here*/);

上記のコードを含む jsFilldeを次に示します。

于 2013-07-25T20:12:29.007 に答える