Карусель с эскизами в Bootstrap 3.0

Ответ 1

Bootstrap 4 (обновление 2019)

Карусель из нескольких предметов может быть выполнена несколькими способами, как описано здесь. Другой вариант - использовать отдельные эскизы для навигации по слайдам карусели.

Bootstrap 3 (оригинальный ответ)

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

       <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

Ответ 2

@Skelly ответ правильный. Это не позволит мне добавить комментарий (< 50 rep)... но ответить на ваш вопрос по его ответу: В примере, который он связал, добавив

col-xs-3 

для каждого из миниатюр, например:

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

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

Ответ 3

Просто нашел отличный плагин для этого:

http://flexslider.woothemes.com/

Привет

Ответ 4

• Используйте индикаторы карусели для отображения эскизов.
• Поместите миниатюры за пределы основной карусели с помощью CSS.
• Установите максимальную высоту индикаторов не больше, чем миниатюры.
• Всякий раз, когда карусель скользит, обновите положение индикаторов, позиционируя активный индикатор в середине индикаторов.

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

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

Мясо...

Обновление индикаторов:

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