web-dev-qa-db-ja.com

Bootstrap 4複数アイテムカルーセル（一度に表示されるいくつかのカルーセルアイテム）

Bootstrap 4で複数アイテムカルーセルを実装する方法.

csshtml5bootstrap-4twitter-bootstrap-4
11
SemanticUI

一度に1つのカルーセルアイテムを表示できますが、複数の要素を入力してください。何かのようなもの：

.item
  .col-xs-4
     {content}
  .col-xs-4
     {content}
  .col-xs-4
     {content}

しかし、それらを一度に1つずつ進めることを望んでいるかもしれません。 bootstrapはすぐに使用できます。多くのカルーセルを実装した後、Bootstrapが収まらない場合は別のカルーセルライブラリを探すことをお勧めします。Slick.jsはたくさんのカルーセル設定オプションの私の行き先のライブラリ。

ブートストラップの使用に苦労している場合は、次のスクリプトを使用して、単一の高度な複数項目を提供できます。 http://codepen.io/MarkitDigital/pen/ZpEByz

14
Eric N

私はbootstrap 4.に取り組んでいます

<div class="container">
            <div class="row">
                <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <div class="row">
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l1.jpg" alt=""/></a>
                                </div>    
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l2.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l3.jpg" alt=""/></a>    
                                </div>    
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l4.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l5.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l6.jpg" alt=""/></a>    
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="row">
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l1.jpg" alt=""/></a>
                                </div>    
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l2.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l3.jpg" alt=""/></a>    
                                </div>    
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l4.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l5.jpg" alt=""/></a>    
                                </div>
                                <div class="col-md-2 col-sm-6 col-12">
                                    <a href="#"><img src="img/l6.jpg" alt=""/></a>    
                                </div>
                            </div>
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>    
        </div>

この6つの画像のマルチカルーセルは、バルクとして毎回スライドします。私に尋ねてください:)

0
Mohamed Abbas