Carrousel avec vignettes dans Bootstrap 3.0

col-xs-3 

classe pour chacune des vignettes, comme ceci:

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

alors il devrait rester comme vous le voulez quand il est dimensionné jusqu'à la largeur du téléphone.

Viens de trouver un plugin pour cela:

http://flexslider.woothemes.com/

Cordialement

1. utilisez les indicateurs du carrousel pour afficher les vignettes.
2. placez les vignettes à l'extérieur du Carrousel principal avec CSS.
3. Réglez la hauteur maximale des indicateurs pour qu'ils ne soient pas plus grands que les vignettes.
4. chaque fois que le carrousel a glissé, mettez à jour la position des indicateurs, positionnant l'indicateur actif au milieu des indicateurs.

j'utilise sur mon site (par exemple,ici), mais je suis à l'aide de quelques trucs supplémentaires pour faire le chargement paresseux, sens extraire le code n'est pas aussi simple que je voudrais qu'il soit pour le mettre dans un violon.

Aussi, mon moteur de template est smarty, mais je suis sûr que vous obtenez 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 la CSS relative 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é, mettre à 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, lorsque votre page se charge, la position de défilement des vignettes:

var indicatorPosition = 0;