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

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

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

Спасибо

Ответы

Ответ 1

В настоящее время нет поддержки для такого варианта в Bootstrap Carousel, и я бы не рекомендовал вам взломать script, поскольку это в основном создает новый, и когда обновление происходит, вы можете потерять поддержку, но есть другие способы, которыми вы можете подделывать такую ​​настройку, используя группу .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>

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

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

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

Ответ 2

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

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

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

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

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

Вот демон jsFiddle Demo jCarousel - добавление для каждого элемента