jquery - multiple - carousel bootstrap responsive

Twitter Bootstrap 2 carrusel: muestra un conjunto de miniaturas a la vez como jcarousel

Question

Agradecería que alguien pudiera aconsejarme sobre cómo modificar el carrusel de Twitter Bootstrap 2 para mostrar un conjunto de miniaturas a la vez, similar a este plugin de jquery (jcarousel)

http://sorgalla.com/projects/jcarousel/examples/static_simple.html

Gracias

Answer 1

@andres-ilich, en primer lugar, fue una gran respuesta, y me pones a pensar en la característica de jCarousel y en cómo debería piratearse el carrusel de Twitter Bootstrap (TB) (lo cual no es ideal). Completamente estoy de acuerdo con usted y no soy partidario de jugar con las anulaciones del marco principal, pero decidí ver si había una forma segura de "extender" potencialmente el carrusel para tratar con un desplazamiento por elemento como jCarousel.

Aquí está mi razón de ser:

• Supuse que todos los artículos están ubicados en el primer .item del carrusel. Como TB tiene su propia lógica y funciones básicas para moverse de un elemento a otro, necesitaba un control más granular de la lógica, pero no quiero luchar o anular las partes internas del carrusel. Así que guardé el carrusel solo en un elemento para evitar tener que atrapar o anular cualquiera de los eventos / códigos del carrusel de TB, ya que nunca se dispararían (en lo que respecta al movimiento).
• Usé .prototype ligeramente y solo para agregar un evento personalizado a next / prev que utilicé para enlazar mi lógica personalizada más tarde. El prototipo clona el método TB primero agrega un $ .trigger al carrusel TB siguiente / anterior y luego ejecuta la lógica original del carrusel TB. Esto salvaguarda mi lógica para soportar futuros lanzamientos de TB (con suerte)
• Creó una clase llamada .jcarousel para permitir la orientación única de este tipo de carrusel para que no interfieramos con otros carruseles en la página que estarían aprovechando la funcionalidad normal del carrusel de TB.

Comenté lo mejor que pude en mi código ya que estoy disfrutando de un café con leche en Starbucks mientras hacía esto, y estoy seguro de que hay margen de mejora ya que fue literalmente una madrugada esperando la respuesta del tipo de autobús a esto.

Espero que esto ayude a cualquiera que lo necesite. Loving Twitter Bootstrap! 2.1 es un gran lanzamiento nuevo.

Aquí está la jsFiddle Demo jCarousel - Por artículo

Answer 2

Prueba este

Pregunta: Twitter Bootstrap Vertical Thumbnail Carousel

GIT Ripo. : https://github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel

Answer 3

Vea esta excelente publicación de blog sobre cómo personalizar el Bootstrap Carousel:

http://untame.net/2013/04/twitter-bootstrap-carousel/#part2

Answer 4

Actualmente no hay soporte para tal opción en Bootstrap Carousel y no recomendaría que hackes el guión, ya que eso básicamente equivale a crear uno nuevo, y cuando se actualice, podrías perder soporte, pero hay otras formas en que Puede falsificar una configuración de este tipo utilizando el grupo .thumbnails que lleva el programa de arranque. Solo estará limitado a dar siempre al contenedor del control deslizante un ancho, o una clase de rango, como sigue:

HTML

<div class="carousel slide span8" id="myCarousel">
<div class="carousel-inner">
  <div class="item active">
        <ul class="thumbnails">
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
        </ul>
  </div>
  <div class="item">
        <ul class="thumbnails">
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
        </ul>
  </div>
  <div class="item">
        <ul class="thumbnails">
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
        </ul>
  </div>
</div>
<a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
</div>

Demo , editar here .

Como puede ver, anillé un grupo de miniaturas dentro de los divs de item que se desliza el carrusel, de esta manera puede hacer que un grupo de imágenes se desplace y no es necesario modificar el guion original.

Nota ^* : demostración actualizada con múltiples tamaños de imagen dentro del carrusel.