Карусель с миниатюрами в Bootstrap 3.0

Мне нужно сделать Bootstrap 3.0 карусель для отображения слайда эскизов. Как я могу это сделать? Это изображение того, что я ищу:

Bootstrap 3.0 Carousel Thumbs

Это рабочий пример для Bootstrap 2, но мне это нужно для Bootstrap 3.0.: Bootstrap Эскиз Слайдер

31
carousel slide slider twitter-bootstrap twitter-bootstrap-3

4 ответов

Это можно сделать с помощью сетки внутри каждого элемента карусели.

       <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>

демонстрационный пример слайдера миниатюр с помощью карусели:
http://www.bootply.com/81478

другой пример с индикаторами карусели в качестве эскизов: http://www.bootply.com/79859

39

@Skelly ' s ответ правильный. Это не позволит мне добавить комментарий ( 

col-xs-3

класс для каждого из эскизов, например:

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

тогда он должен оставаться таким, как вы хотите, когда размер до ширины телефона.

9

только что узнал, есть отличный плагин для этого:

http://flexslider.woothemes.com/

в отношении

4
  1. используйте индикаторы карусели для отображения эскизов.
  2. положение эскизы вне основной карусель с CSS.
  3. установите максимальную высоту индикаторов не больше, чем эскизы.
  4. всякий раз, когда карусель скользит, обновите положение индикаторов, позиционируя активный индикатор в середине индикаторов.

я использую это на своем сайте (например здесь), но я использование некоторых дополнительных вещей для ленивой загрузки, то есть извлечение кода не так просто, как я хотел бы, чтобы это было для его ввода в скрипку.

кроме того, мой шаблон двигатель умница, но я уверен, что вы поняли идею.

мясо...

обновление показателей:

<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>

изменение CSS, связанного с индикаторами:

.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;
}

когда карусель скользнула, обновите список миниатюры:

$('#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;
});

и, когда ваша страница загружается, установите начальное положение прокрутки эскизов:

var indicatorPosition = 0;
0