Carrusel con miniaturas en Bootstrap 3.0

La respuesta de@Skelly es correcta. No me deja añadir un comentario (

col-xs-3 

Clase a cada una de las miniaturas, así:

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

Entonces debe permanecer de la manera que desee cuando se dimensiona hasta el ancho del teléfono.

Acabo de encontrar un gran plugin para esto:

Http://flexslider.woothemes.com /

Saludos

1. Utilice los indicadores del carrusel para mostrar miniaturas.
2. Coloque las miniaturas fuera del carrusel principal con CSS.
3. Establezca la altura máxima de los indicadores para que no sea mayor que las miniaturas.
4. Siempre que el carrusel se haya deslizado, actualice la posición de los indicadores, colocando el indicador activo en el medio de los indicadores.

Estoy usando esto en mi sitio (por ejemplo aquí ), pero estoy usando algunas cosas adicionales para hacer perezoso cargar, es decir, extraer el código no es tan sencillo como me gustaría que fuera para ponerlo en un violín.

Además, mi motor de plantillas es inteligente, pero estoy seguro de que entiendes la idea.

La carne...

Actualización de los indicadores:

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

Cambiando el CSS relacionado con los indicadores:

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

Cuando el carrusel se haya deslizado, actualice la lista de miniaturas:

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

Y, cuando se cargue su página, establezca la posición de desplazamiento inicial de las miniaturas:

var indicatorPosition = 0;