twitter bootstrap - multiple - Carrusel con miniaturas en Bootstrap 3.0

carousel bootstrap ejemplo

Question

Necesito hacer que Bootstrap 3.0 Carousel muestre una diapositiva de miniaturas. ¿Cómo puedo hacer esto? Esta es una imagen de lo que estoy buscando:

Este es un ejemplo de trabajo para Bootstrap 2, pero lo necesito para Bootstrap 3.0 .: Bootstrap Thumbnail Slider

Answer 1

1. Use 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 here ), pero estoy usando algunas cosas extra para hacer la carga lenta, lo que significa que extraer el código no es tan directo como me gustaría para ponerlo en un violín.

Además, mi motor de plantillas es smarty , 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>

Cambiar 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 su página se carga, configure la posición de desplazamiento inicial de las miniaturas:

var indicatorPosition = 0;

Answer 2

Acabo de descubrir un gran complemento para esto:

http://flexslider.woothemes.com/

Saludos

Answer 3

Esto se puede hacer usando la cuadrícula dentro de cada elemento del carrusel.

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

Deslizador de miniatura de ejemplo de demostración utilizando el carrusel:
http://www.bootply.com/81478

Otro ejemplo con indicadores de carrusel como miniaturas: http://www.bootply.com/79859

Answer 4

La respuesta de @Skelly es correcta. No me deja agregar un comentario (<50 repeticiones) ... pero para responder a su pregunta sobre su respuesta: en el ejemplo que vinculó, si agrega

col-xs-3 

clase a cada una de las miniaturas, como esta:

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

luego debe permanecer de la manera que lo desee cuando se ajuste al ancho del teléfono.