Necesito hacer Bootstrap 3.0 de Carrusel para mostrar una presentación de imágenes en miniatura. ¿Cómo puedo hacer esto?
Esta es una imagen de lo que estoy buscando:

Carrusel con imágenes en miniatura en el Bootstrap 3.0

Este es un ejemplo de trabajo para el Bootstrap 2, pero necesito esto para el Bootstrap 3.0.: Bootstrap Slider De Miniaturas

  • Puedo obtener un ejemplo de esto en html ? Todos los enlaces están rotos .Gracias de antemano.
InformationsquelleAutor Martín | 2013-09-17

4 Comentarios

  1. 39

    Bootstrap 4 (actualización de 2019)

    Un multi-elemento del carrusel se puede lograr de varias maneras como se explica aquí. Otra opción es utilizar miniaturas por separado para navegar por el carrusel de diapositivas.

    Bootstrap 3 (respuesta original)

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

           <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 de ejemplo miniatura de la barra usando el carrusel:
    http://www.bootply.com/81478

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

    • Gran ejemplo, pero… ¿cómo puedo hacer esta sensible?
    • Es sensible.. ¿desea a todo lo ancho? o cambiar el diseño basado en diferentes pantallas o dispositivos?
    • Si usted puede minimizar la ventana de los elementos se enumeran a continuación, ese es el problema.
    • cuando prev y next es en la desliza para mover sólo una miniatura en un tiempo(no todos 4), ¿cómo puedo hacerlo?
  2. 9

    @Skelly ‘s respuesta es correcta. No me deja añadir un comentario (<50 rep)… pero para responder a su pregunta sobre su respuesta: En el ejemplo que él vinculadas, si agrega

    col-xs-3 

    de clase para cada una de las miniaturas, como este:

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

    a continuación, debe permanecer la manera que usted desea cuando el tamaño abajo para teléfono de ancho.

    • No funciona para mí .. el mismo problema
  3. 0
    1. Utilizar el carrusel de indicadores para mostrar las miniaturas.
    2. Posición de las miniaturas fuera de la principal carrusel con CSS.
    3. Establecer la altura máxima de los indicadores no deben ser más grandes que las miniaturas.
    4. Siempre que el carrusel se ha deslizado, la actualización de la posición de los indicadores, el posicionamiento, el indicador activo en el medio de los indicadores.

    Estoy usando esto en mi sitio (por ejemplo aquí), pero estoy usando algunas cosas extras para hacer la carga diferida, lo que significa extraer el código no es tan sencillo como a mi me gustaría ser puesta en un violín.

    También, mi motor de plantillas es smarty, pero estoy seguro de que usted consigue la idea.

    La carne…

    La 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 relacionadas 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 ha deslizado, la actualización de 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 carga de la página, configurar la inicial de la posición de desplazamiento de las miniaturas:

    var indicatorPosition = 0;
    • A ver yo hice algo muy parecido. Pero tengo un problema en el que las imágenes en el slider no se presenta a pesar de que a todos. La imagen principal en el carrusel de la muestra y la mantiene en bicicleta a través de una lista sin problema, pero las miniaturas no aparecer nunca. A la nota, hay más de 100 imágenes que estoy tratando de mostrar así que no estoy seguro de si eso causa problemas.

Dejar respuesta

Please enter your comment!
Please enter your name here