jquery - Twitter ブートストラップ Javascript カルーセル 複数アクティブ アイテム トランジション

Question

これまでに見つけた例では、すべて一度に 1 つのアイテムを表示しています。サムネイルを使用して複数のアクティブなアイテムを表示したい場合、例はアイテム自体に複数のサムネイルが含まれていることを示しています。「次へ」または「前へ」ボタンを押すと、「アクティブな」クラスが別のアイテムに設定されているため、アイテムのすべてのコンテンツが置き換えられます。

「carousel-inner」クラス内に複数のアクティブなアイテムを表示したい。なんとかできましたが、残念ながら「次へ」と「前へ」ボタンが機能しなくなりました。以下は、これまでに試した回避策です。たとえば、「次へ」または「前へ」ボタンのクリックごとにアクティブなアイテムを 2 つ移動したいとします。なにか提案を？

<div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="http://ucsdnews.ucsd.edu/graphics/images/2009/11-09OceanRobots01.jpg" alt="Image" style="max-width: 100%;" /></a>
                    </div>
                </div>
            </div>
            <div class="item active">
                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="http://www.nmsfocean.org/files/windfarm-250x250.jpg" alt="Image" style="max-width: 100%;" /></a>
                    </div>                       
                </div>
            </div>
            <div class="item">
                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="http://www.notempire.com/images/uploads/Conserve_Our_Oceans-2.jpg" alt="Image" style="max-width: 100%;" /></a>
                    </div>                      
                </div>
            </div>
            <div class="item">
                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="http://www.northcountrypublicradio.org/news/images/blacksmokervent_250.jpg" alt="Image" style="max-width: 100%;" /></a>
                    </div>                      
                </div>
            </div>
            <div class="item">
                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="https://lh6.googleusercontent.com/-jTLcTU1RvZc/Ts11y1haQqE/AAAAAAAAALk/xYJoRFK-ibw/s250-c-k-no/OceanSunfish" alt="Image" style="max-width: 100%;" /></a>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="http://tcktcktck.org/wp-content/uploads/2011/09/ocean-heat.jpg" alt="Image" style="max-width: 100%;" /></a>
                    </div>
                </div>
            </div>
        </div>
        <!--/carousel-inner-->
        <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>

私はAngular JSプロジェクトに取り組んでいます。したがって、角度のあるソリューションは高く評価されます。ありがとう。

Answer 1

これを試して：

項目クラス div にまとめて表示する group 要素

<div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="http://ucsdnews.ucsd.edu/graphics/images/2009/11-09OceanRobots01.jpg" alt="Image" style="max-width: 100%;" /></a>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="http://www.nmsfocean.org/files/windfarm-250x250.jpg" alt="Image" style="max-width: 100%;" /></a>
                    </div>                       
                </div>
            </div>
            <div class="item">
                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="http://www.notempire.com/images/uploads/Conserve_Our_Oceans-2.jpg" alt="Image" style="max-width: 100%;" /></a>
                    </div>                      
                </div>
                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="http://www.northcountrypublicradio.org/news/images/blacksmokervent_250.jpg" alt="Image" style="max-width: 100%;" /></a>
                    </div>                      
                </div>
            </div>
            <div class="item">
                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="https://lh6.googleusercontent.com/-jTLcTU1RvZc/Ts11y1haQqE/AAAAAAAAALk/xYJoRFK-ibw/s250-c-k-no/OceanSunfish" alt="Image" style="max-width: 100%;" /></a>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span6">
                        <a href="#x" class="thumbnail">
                            <img src="http://tcktcktck.org/wp-content/uploads/2011/09/ocean-heat.jpg" alt="Image" style="max-width: 100%;" /></a>
                    </div>
                </div>
            </div>
        </div>
        <!--/carousel-inner-->
        <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>