web-dev-qa-db-fra.com

Carrousel avec des vignettes dans Bootstrap 3.0

J'ai besoin de faire Bootstrap 3.0 Carousel pour afficher une diapositive de vignettes. Comment puis-je faire cela? Ceci est une image de ce que je recherche:

Bootstrap 3.0 Carousel Thumbs

Ceci est un exemple de travail pour Bootstrap 2, mais j’en ai besoin pour Bootstrap 3.0 .: curseur de vignette Bootstrap)

twitter-bootstraptwitter-bootstrap-3slidercarouselthumbnails
31
Martín

Bootstrap 4 (mise à jour 2019)

Un carrousel multi-articles peut être réalisé de plusieurs manières comme expliqué ici . Une autre option consiste à utiliser miniatures séparées pour naviguer dans les diapositives du carrousel .

Bootstrap 3 (réponse originale)

Cela peut être fait en utilisant la grille à l'intérieur de chaque élément du carrousel.

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

Exemple de curseur de vignette exemple utilisant le carrousel:
http://www.bootply.com/81478

Un autre exemple avec des indicateurs de carrousel sous forme de vignettes: http://www.bootply.com/79859

39
Zim

La réponse de @Skelly est correcte. Cela ne me permettra pas d'ajouter un commentaire (<50 rep) ... mais pour répondre à votre question sur sa réponse: dans l'exemple qu'il a lié, si vous ajoutez

col-xs-3

classe à chacune des vignettes, comme ceci:

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

alors, il devrait rester comme vous le souhaitez quand il est ajusté à la largeur du téléphone.

9
guydog28

Je viens de trouver un excellent plugin pour cela:

http://flexslider.woothemes.com/

Cordialement

4
rafamiranda
  1. Utilisez les indicateurs du carrousel pour afficher les vignettes.
  2. Positionnez les vignettes en dehors du carrousel principal avec CSS.
  3. Définissez la hauteur maximale des indicateurs pour qu'elle ne soit pas supérieure à celle des vignettes.
  4. Chaque fois que le carrousel a glissé, mettez à jour la position des indicateurs, en plaçant l'indicateur actif au milieu des indicateurs.

J'utilise ceci sur mon site (par exemple ici ), mais j'utilise des outils supplémentaires pour effectuer un chargement paresseux, ce qui signifie que l'extraction du code n'est pas aussi simple que je le souhaiterais. pour le mettre dans un violon.

En outre, mon moteur de templates est smarty , mais je suis sûr que vous avez compris l'idée.

La viande...

Mise à jour des indicateurs:

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

Changer le CSS lié aux indicateurs:

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

Lorsque le carrousel a glissé, mettez à jour la liste des vignettes:

$('#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;
});

Et, lors du chargement de votre page, définissez la position de défilement initiale des vignettes:

var indicatorPosition = 0;
0
MastaBaba