Karuzela na Twitterze Bootstrap 2 - wyświetla zestaw miniatur w czasie takim jak jcarousel

Question

Byłbym wdzięczny, gdyby ktoś mógł doradzić, jak zmodyfikować karuzelę Twitter Bootstrap 2, aby wyświetlić zestaw miniatur w czasie podobnym do tej wtyczki jquery (jcarousel)

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

Dzięki

Answer 1

Obecnie nie ma wsparcia dla takiej opcji na Karuzeli bootstrap i nie polecam siekać daleko na skrypcie gdyż wynosi w zasadzie tworzenia nowego jeden, a po aktualizacji można stracić wsparcie, ale są też inne sposoby, w jakie można sfałszować taką konfigurację za pomocą grupy .thumbnails, którą nosi bootstrap. Będziesz po prostu być ograniczone do pojemnika zawsze dając suwak szerokość, lub span class, tak jak poniżej:

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, edytować here.

Jak widać, zagnieżdżono grupę miniatur wewnątrz elementów div item, którą przesuwa się karuzela, w ten sposób można przesuwać grupę obrazów i nie trzeba modyfikować oryginalnego skryptu.

Notatka ^*: Zaktualizowana wersja demonstracyjna z wieloma rozmiarami obrazu wewnątrz karuzeli.

Answer 2

@ andres-ilich jako pierwsza była świetną odpowiedzią, dzięki której mogłem pomyśleć o funkcji jCarousel i o tym, że karuzela z Twitter Bootstrap (TB) musiałaby zostać zhackowana (co nie jest idealne). Całkowicie zgadzam się z tobą, a nie fanem manipulowania podstawowymi przesłonięciami ramek, ale postanowił sprawdzić, czy istnieje bezpieczny sposób potencjalnego "rozszerzenia" karuzeli na przewijany element, jak jCarousel.

Oto moje uzasadnienie:

• Sądziłem, że wszystkie elementy są umieszczone w pierwszej .item karuzeli. Ponieważ TB ma swoją własną logikę i podstawowe funkcje związane z przejściem od elementu do elementu, potrzebowałem bardziej szczegółowej kontroli nad logiką, ale nie chcę zmagać się z wewnętrznymi elementami karuzeli. Trzymałem więc karuzelę tylko na jednym elemencie, aby uniemożliwić pułapkę lub nadpisanie któregokolwiek z wydarzeń/kodu dla karuzeli TB, ponieważ nigdy nie wystrzeliłby (ruch jest mądry).
• Użyłem .prototype lekko i tylko, aby dodać niestandardowe zdarzenie do następnego/poprzedniego, którego użyłem do powiązania logiki niestandardowej później. Prototyp klonów metodą TB najpierw dodaje $ .trigger do karuzeli TB next/prev, a następnie wykonuje oryginalną logikę TB. Chroni to moją logikę, aby wytrzymać przyszłe wydania TB (mam nadzieję)
• Utworzono klasę o nazwie .jcarousel, aby umożliwić unikalne kierowanie tego typu karuzeli, abyśmy nie ingerowali w inne karuzele na stronie, które mogłyby wykorzystać normalne Funkcjonalność karuzeli TB.

Skomentowałem najlepiej, jak mogłem w swoim kodzie, ponieważ cieszę się latte w Starbucks podczas gdy ja to robiłem, i jestem pewien, że jest miejsce na poprawę, ponieważ był to dosłownie wcześnie rano oczekiwanie na typ autobusu odpowiedzi na to.

Mam nadzieję, że to pomoże każdemu, kto tego potrzebuje. Kochający Twitter Bootstrap! 2.1 to świetne nowe wydanie.

Oto jsFiddle Demo jCarousel - Per Item extension

Answer 3

Zobacz tę doskonałą blogu na temat dostosowywania bootstrap Karuzela:

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

Answer 4

próbować ten jeden

pytanie: Twitter Bootstrap Vertical Thumbnail Carousel

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