it-swarm.com.de

Karussell mit Thumbnails in Bootstrap 3.0

Ich muss Bootstrap 3.0 Carousel erstellen, um eine Miniaturbild-Folie anzuzeigen. Wie kann ich das tun? Dies ist ein Bild von dem, wonach ich suche:

Bootstrap 3.0 Carousel Thumbs

Dies ist ein Arbeitsbeispiel für Bootstrap 2, aber ich brauche dies für Bootstrap 3.0 .: Bootstrap Thumbnail Slider

31
Martín

Bootstrap 4 (Update 2019)

Ein mehrteiliges Karussell kann auf verschiedene Arten hergestellt werden wie hier erklärt . Eine andere Option ist separate Thumbnails zum Navigieren in den Karussell-Dias .

Bootstrap 3 (ursprüngliche Antwort)

Dies kann über das Gitter in jedem Karussell erfolgen.

       <div id="myCarousel" class="carousel slide">
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="row">
                            <div class="col-sm-3">..
                            </div>
                            <div class="col-sm-3">..
                            </div>
                            <div class="col-sm-3">..
                            </div>
                            <div class="col-sm-3">..
                            </div>
                        </div>
                        <!--/row-->
                    </div>
                    ...add more item(s)
                 </div>
        </div>

Demo-Beispiel eines Miniaturbild-Schiebereglers mit dem Karussell:
http://www.bootply.com/81478

Ein weiteres Beispiel mit Karussellanzeigen als Miniaturansichten: http://www.bootply.com/79859

39
Zim

@Skellys Antwort ist richtig. Ich kann keinen Kommentar hinzufügen (<50 Wiederholungen) ... aber um Ihre Frage zu seiner Antwort zu beantworten: In dem Beispiel, das er verlinkt hat, wenn Sie hinzufügen

col-xs-3 

klasse zu jedem der Vorschaubilder, wie folgt:

class="col-md-3 col-xs-3"

dann sollte es so bleiben, wie Sie es möchten, wenn es auf die Breite des Telefons verkleinert wird.

9
guydog28

Habe gerade ein großartiges Plugin dafür herausgefunden:

http://flexslider.woothemes.com/

Grüße

4
rafamiranda
  1. Verwenden Sie die Anzeigen des Karussells, um Miniaturansichten anzuzeigen.
  2. Positionieren Sie die Thumbnails mit CSS außerhalb des Hauptkarussells.
  3. Stellen Sie die maximale Höhe der Anzeigen so ein, dass sie nicht größer als die Miniaturansichten ist.
  4. Wenn sich das Karussell verschoben hat, aktualisieren Sie die Position der Anzeigen und positionieren Sie die aktive Anzeige in der Mitte der Anzeigen.

Ich verwende dies auf meiner Site (zum Beispiel hier ), aber ich verwende ein paar zusätzliche Dinge, um faul zu laden, was bedeutet, dass das Extrahieren des Codes nicht so einfach ist, wie ich es gerne hätte für es in einer Geige setzen.

Außerdem ist meine Templating-Engine smarty , aber ich bin mir sicher, dass Sie auf die Idee kommen.

Das Fleisch...

Aktualisierung der Indikatoren:

<ol class="carousel-indicators">
    {assign var='walker' value=0}
    {foreach from=$item["imagearray"] key="key" item="value"}
        <li data-target="#myCarousel" data-slide-to="{$walker}"{if $walker == 0} class="active"{/if}>
            <img src='http://farm{$value["farm"]}.static.flickr.com/{$value["server"]}/{$value["id"]}_{$value["secret"]}_s.jpg'>
        </li>

        {assign var='walker' value=1 + $walker}
    {/foreach}
</ol>

Ändern des CSS in Bezug auf die Indikatoren:

.carousel-indicators {
    bottom:-50px;
    height: 36px;
    overflow-x: hidden;
    white-space: nowrap;
}

.carousel-indicators li {
    text-indent: 0;
    width: 34px !important;
    height: 34px !important;
    border-radius: 0;
}

.carousel-indicators li img {
    width: 32px;
    height: 32px;
    opacity: 0.5;
}

.carousel-indicators li:hover img, .carousel-indicators li.active img {
    opacity: 1;
}

.carousel-indicators .active {
    border-color: #337ab7;
}

Wenn das Karussell verschoben wurde, aktualisieren Sie die Liste der Miniaturansichten:

$('#myCarousel').on('slid.bs.carousel', function() {
    var widthEstimate = -1 * $(".carousel-indicators li:first").position().left + $(".carousel-indicators li:last").position().left + $(".carousel-indicators li:last").width(); 
    var newIndicatorPosition = $(".carousel-indicators li.active").position().left + $(".carousel-indicators li.active").width() / 2;
    var toScroll = newIndicatorPosition + indicatorPosition;
    var adjustedScroll = toScroll - ($(".carousel-indicators").width() / 2);
    if (adjustedScroll < 0)
        adjustedScroll = 0;

    if (adjustedScroll > widthEstimate - $(".carousel-indicators").width())
        adjustedScroll = widthEstimate - $(".carousel-indicators").width();

    $('.carousel-indicators').animate({ scrollLeft: adjustedScroll }, 800);

    indicatorPosition = adjustedScroll;
});

Legen Sie beim Laden Ihrer Seite die anfängliche Bildlaufposition für die Miniaturansichten fest:

var indicatorPosition = 0;
0
MastaBaba