Twitter Bootstrap 2 carousel - отображает набор миниатюр одновременно, как jcarousel

Question

Буду признателен, если кто-нибудь посоветует, как изменить карусель Twitter Bootstrap 2, чтобы одновременно отображать набор миниатюр, похожих на этот плагин jquery (jcarousel)

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

Спасибо

Answer 1

В настоящее время такая поддержка в Bootstrap Carousel не поддерживается, и я бы не рекомендовал вам взламывать сценарий, поскольку это сводится к созданию нового, и при обновлении вы можете потерять поддержку, но естьдругие способы, которыми вы можете подделать такую ​​настройку, используя группу .thumbnails, которую несет загрузчик.Вы просто будете ограничены тем, чтобы всегда указывать контейнеру-ползунку ширину или класс span, например:

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>

Демо , отредактируйте здесь .

Как вы можете видеть, я вложил группу миниатюр в элементы item, которые перемещает карусель, таким образом вы можете сделать слайд группы изображений, и естьне нужно изменять оригинальный скрипт.

Примечание ^*: обновленная демонстрация с несколькими размерами изображений внутри карусели.

Answer 2

@ andres-ilich Прежде всего, это был отличный ответ, и вы заставили меня задуматься о функции, подобной jCarousel, и о том, как карусель Twitter Bootstrap (TB) должна быть взломана (что не идеально). Я полностью согласен с вами, а не фанатом возиться с переопределениями базовых фреймворков, но решил посмотреть, есть ли безопасный способ потенциально «расширить» карусель для работы с прокруткой каждого элемента, такой как jCarousel.

Вот мое обоснование:

• Я предположил, что все предметы находятся в первой .item карусели. Поскольку у TB есть своя собственная логика и основные функции для перемещения от элемента к элементу, мне потребовалось более детальное управление логикой, но я не хочу ломать или перекрывать внутренние элементы карусели. Поэтому я держал карусель только в одном элементе, чтобы избежать захвата или переопределения любых событий / кодов для карусели ТБ, поскольку они никогда не сработают (это правильно).
• Использовал .prototype легко и только для добавления пользовательского события в next / prev, которое я использовал для привязки своей пользовательской логики позже. Прототип клонирует метод TB, сначала добавляет $ .trigger в карусель TB next / prev, а затем выполняет исходную логику карусели TB. Это защищает мою логику, чтобы противостоять будущим версиям туберкулеза (надеюсь)
• Создан класс с именем .jcarousel для обеспечения уникального таргетинга этого типа карусели, чтобы мы не мешали другим каруселям на странице, которые будут использовать обычную функциональность карусели ТБ.

Я прокомментировал все, что мог, в своем коде, так как я наслаждался латте в Starbucks, пока я делал это, и я уверен, что есть возможности для улучшения, так как это было буквально ранним утром в ожидании ответа типа автобуса. это.

Надеюсь, это поможет всем, кто в этом нуждается. Любящий Twitter Bootstrap! 2.1 - отличный новый выпуск.

Вот демоверсия jsFiddle jCarousel - Расширение для каждого элемента

Answer 3

Попробуйте это

Вопрос: Twitter Bootstrap Вертикальная миниатюра с каруселью

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

Answer 4

Смотрите этот отличный пост в блоге о настройке Карусели Bootstrap:

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