Twitter Bootstrap - mehrere Bild (thumbnail) Karussell - bewegen thumbnails ein zu einer Zeit

Ich versuche aus Twitter bootstrap 3. Ich bin ziemlich neu in HTML, CSS und Javascript. Ich habe ein Karussell, die ich erstellt, und der code sieht so aus:

<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>

Dies ist nun so eingestellt, dass 4 Bilder auf einmal. Die Sache ist, ich habe 8 Bilder. Im Karussell oben zeigt es 4 Bilder gleichzeitig und gleitet dann zum nächsten 4. Hier ist das Javascript:

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

Und 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; }

Wie bekomme ich die Bilder zu verschieben, nur ein-at-a-time-in einer Endlosschleife?

  • Wollen Sie es nur display eine zu einem Zeitpunkt oder Anzeige 4 sondern nur verschieben 1 zusammen?
  • display 4, aber nur 1 zusammen klingt genau, was ich tun soll..
  • Ah stimmt, ich entschuldige mich dann, ich weiß nicht, wie zu tun, dass mit Bootstrap das carousel. Nicht sicher, es ist möglich, ehrlich zu sein. Natürlich, nur die Anzeige eine zu einem Zeitpunkt wäre viel einfacher gewesen!
  • Wäre es möglich, wenn ich hatte 4 Karussells nebeneinander, jeder zeigt ein Bild und blenden Sie die Anzeige-Symbole?
InformationsquelleAutor rahuL | 2013-10-27
Schreibe einen Kommentar