7

Twitter ブートストラップ 3 を試しています。HTML、CSS、Javascript はまったくの初心者です。私が作成したカルーセルがあり、コードは次のようになります。

<div class="container">
    <div id="myCarousel2" class="carousel slide">
        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="row text-center">
                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->

                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->

                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->

                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->
                </div>
            </div>
            <div class="item">
                <div class="row text-center">
                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->
                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->
                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/buzzbutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->
                    <!-- ITEM-->
                    <div class="col-md-3">
                        <div class="thumbnail product-item">    <a class="img-responsive" href="/current-buzz"><img src="{% static 'img/recipebutton.jpg' %}"/></a>

                        </div>
                    </div>
                    <!-- ITEM-->
                </div>
            </div>
        </div>
        <!-- /INNER-->
        <!-- Carousel nav -->

        <a class="carousel-control left" href="#myCarousel2" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>

    </div>
</div>

これで、一度に 4 つの画像を表示するように設定されました。問題は、8枚の画像があることです。上のカルーセルでは、一度に 4 つの画像が表示され、次の 4 つにスライドします。Javascript は次のとおりです。

<script type="text/javascript">
$('.carousel.slide').carousel()
</script>

そしてCSS：

@media (max-width: 767px){
.carousel .row .span3 {
display: block;
float: left;
width: 25%;
margin-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
    }
}
.carousel .carousel-control { visibility: hidden; }

連続ループで一度に 1 つずつ画像を移動するにはどうすればよいですか?

4

1 に答える 1

11

この Bootply をご覧ください: http://bootply.com/94452

jQuery を使用して、それに応じて項目を clone() できます。

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  for (var i=0;i<2;i++) {
    next=next.next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }

    next.children(':first-child').clone().appendTo($(this));
  }
});

代替オプション:一度に複数のフレームをブートストラップ カルーセル

于 2013-11-15T20:22:04.403 に答える