Bootstrap - Карусель (carousel)

На этом уроке Вы узнаете, как создать карусель с помощью Twitter Bootstrap 3

Создание карусели с помощью Twitter Bootstrap 3

Carousel (Карусель) - это слайд-шоу компонент для циклической смены элементов (изображений или текстовых слайдов).

Если страница для пользователя не видима (например, когда вкладка, содержащая карусель неактивна или окно браузера свёрнуто и т.д.), то карусель не будет осуществлять смену слайдов. Это характерно только для браузеров, которые поддерживают Page Visibilty API.

Вложенные карусели в Twitter Boostrap 3 и 4 не поддерживаются.

Следующий пример покажет вам, как создать карусель, состоящую из 3 слайдов, с помощью платформы Twitter Bootstrap:

<!-- Таблица стилей CSS -->
<style type="text/css">
h2{
    margin: 0;     
    color: #666;
    padding-top: 90px;
    font-size: 52px;
    font-family: "trebuchet ms", sans-serif;    
}
.item{
    background: #333;    
    text-align: center;
    height: 300px !important;
}
.carousel{
    margin-top: 20px;
}
</style>

<!-- Карусель -->
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
  <!-- Индикаторы для карусели -->
  <ol class="carousel-indicators">
    <!-- Перейти к 0 слайду карусели с помощью соответствующего индекса data-slide-to="0" -->
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <!-- Перейти к 1 слайду карусели с помощью соответствующего индекса data-slide-to="1" -->
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <!-- Перейти к 2 слайду карусели с помощью соответствующего индекса data-slide-to="2" -->
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>   
  <!-- Слайды карусели -->
  <div class="carousel-inner">
    <!-- Слайды создаются с помощью контейнера с классом item, внутри которого помещается содержимое слайда -->
    <div class="active item">
      <h2>Слайд №1</h2>
      <div class="carousel-caption">
        <h3>Заголовок 1 слайда</h3>
        <p>Текст (описание) 1 слайда...</p>
      </div>
    </div>
    <!-- Слайд №2 -->
    <div class="item">
      <h2>Slide 2</h2>
      <div class="carousel-caption">
        <h3>Second slide label</h3>
        <p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p>
      </div>
    </div>
    <!-- Слайд №3 -->
    <div class="item">
      <h2>Slide 3</h2>
      <div class="carousel-caption">
        <h3>Third slide label</h3>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <!-- Навигация для карусели -->
  <!-- Кнопка, осуществляющая переход на предыдущий слайд с помощью атрибута data-slide="prev" -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <!-- Кнопка, осуществляющая переход на следующий слайд с помощью атрибута data-slide="next" -->
  <a class="carousel-control right" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
Bootstrap - Пример карусели с 3 слайдами
Bootstrap - Карусель, состоящая из 3 слайдов

Демонстрация карусели (1)

Управления каруселью с помощью data атрибутов

Twitter Bootstrap позволяет контролировать позицию показываемого слайда карусели с помощью атрибутов data. Пример управления каруселью с помощью этих атрибутов продемонстрировано на примере выше. Теперь давайте рассмотрим какие атрибуты и за что отвечают.

Атрибут data-slide принимает значения prev и next, которые изменяют позицию слайда относительно его текущей позиции. Атрибут data-slide обычно применяется для кнопки для перехода на предыдущий и следующий слайд.

Кроме того, вы можете использовать атрибут data-slide-to, чтобы перейти к любому слайду карусели с помощью соответствующего индекса. Например: data-slide-to="1" - для перехода к слайду с индексом 1.

Кроме того, карусель не будет автоматически сменять слайды после загрузки страницы, если не указать атрибут data-ride="carousel".

Управление каруселью с помощью JavaScript

Карусель можно активировать вручную вызвать с помощью кода JavaScript: $('.carousel').carousel(). Данный код состоит из метода .carousel() и идентификатора или класса к которому нужно применить данный метод. На примере выше используется класс .carousel.

Параметры

Есть определенные параметры, которые могут быть переданы методу Bootstrap carousel() для дополнительной настройки карусели:

Имя Тип Значение
по умолчанию
Описание
interval number 5000 Задаёт количество времени в миллисекундах между автоматической сменой слайдов карусели
pause string "hover" Приостанавливает показ слайдов при нахождении курсора мышки в пределах границ и возобновляет показ при нахождении курсора за пределами границ слайда.
wrap boolean true Запрещает непрерывный переход на следующий слайд с последнего слайда (т.е. он должен быть первым) и на предыдущий слайд с первого слайда (т.е. он должен быть последним)

Примечание: Вы также можете установить эти параметры с помощью атрибутов data: data-interval="5000", data-pause="hover".

Методы

Стандартные Bootstrap методы карусели:

Метод Описание Пример
.carousel(options) Инициализирует карусель с дополнительными параметрами и запускает процесс смены слайдов $('#id').carousel({interval: 4000})
.carousel('cycle') Запускает процесс смены слайдов слева направо $('#id').carousel('cycle')
.carousel('pause') Останавливает процесс автоматической смены слайдов карусели $('#id')..carousel('pause')
.carousel(number) Осуществляет переход на определённый слайд карусели, который устанавливается с помощью числа number (отчёт ведётся с 0, по аналогии с массивом) $('#id').carousel(1)
.carousel('prev') Осуществляет переход на предыдущий слайд $('#id').carousel('prev')
.carousel('next') Осуществляет переход на следующий слайд $('#id').carousel('next')

На следующем примере продемонстрируем использование методов для управления каруселью:

<!-- Скрипт на языке JavaScript --> 
<script type="text/javascript">
$(document).ready(function(){
  // Инициализирует карусель
  $(".start-slide").click(function(){
    $("#myCarousel2").carousel('cycle');
  });
  // Останавливает процесс автоматической смены слайдов карусели
  $(".pause-slide").click(function(){
    $("#myCarousel2").carousel('pause');
  });
  // Осуществляет переход на предыдущий слайд
  $(".prev-slide").click(function(){
    $("#myCarousel2").carousel('prev');
  });
  // Осуществляет переход на следующий слайд
  $(".next-slide").click(function(){
    $("#myCarousel2").carousel('next');
  });
  // Осуществляет переход на 0 слайд карусели 
  $(".slide-one").click(function(){
    $("#myCarousel2").carousel(0);
  });
  // Осуществляет переход на 1 слайд карусели 
  $(".slide-two").click(function(){
    $("#myCarousel2").carousel(1);
  });
  // Осуществляет переход на 2 слайд карусели 
  $(".slide-three").click(function(){
    $("#myCarousel2").carousel(2);
  });
});
</script>

<!-- Стили CSS -->
<style type="text/css">
h2{
    margin: 0;     
    color: #666;
    padding-top: 90px;
    font-size: 52px;
    font-family: "trebuchet ms", sans-serif;    
}
.item{
    background: #333;    
    text-align: center;
    height: 300px !important;
}
.carousel2{
	margin: 20px 0;
}
.control-buttons{
	text-align:center;
}
.examplecarusel{
	margin: 20px;
} 
</style>

<!-- HTML код карусели -->
<div class="examplecarusel">
<div id="myCarousel2" class="carousel slide" data-interval="3000" data-ride="carousel">
  <!-- Слайды карусели -->
  <div class="carousel-inner">
    <!-- 1 слайд -->
    <div class="active item">
      <h2>Слайд №1</h2>
      <div class="carousel-caption">
        <h3>Заголовок 1 слайда</h3>
        <p>Описание 1 слайда...</p>
      </div>
    </div>
    <div class="item">
      <h2>Слайд №2</h2>
      <div class="carousel-caption">
        <h3>Заголовок 2 слайда</h3>
        <p>Описание 2 слайда...</p>
      </div>
    </div>
    <div class="item">
      <h2>Слайд №3</h2>
      <div class="carousel-caption">
        <h3>Заголовок 3 слайда</h3>
        <p>Описание 3 слайда...</p>
      </div>
    </div>
  </div>
</div>  
<!-- Кнопки управления -->
<div style="margin-top: 20px; text-align:center;">
  <input type="button" class="btn btn-info start-slide" value="Старт">
  <input type="button" class="btn btn-info pause-slide" value="Пауза">
  <input type="button" class="btn btn-info prev-slide" value="Предыдущий">
  <input type="button" class="btn btn-info next-slide" value="Следующий">
  <input type="button" class="btn btn-info slide-one" value="Слайд 1">
  <input type="button" class="btn btn-info slide-two" value="Слайд 2">            
  <input type="button" class="btn btn-info slide-three" value="Слайд 3">
</div>
Bootstrap - Карусель, управляемая с помощью кнопок
Bootstrap - Пример карусели, управляемой с помощью кнопок

Демонстрация карусели (2)

События

Описание событий для "карусели" приведены в таблице:

Событие Описание Пример
slide.bs.carouse Событие срабатывает перед началом процесса смены слайда $('#id').on('slide.bs.carousel', function () { // сделать что-нибудь... })
slid.bs.carousel Событие срабатывает после процесса смены слайда $('#id').on('slid.bs.carousel', function () { // сделать что-нибудь...})

Следующий пример демонстрирует использование событий:

<div id="myCarousel3" class="carousel slide">
  <!-- Индикаторы карусели -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel3" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel3" data-slide-to="1"></li>
    <li data-target="#myCarousel3" data-slide-to="2"></li>
   </ol>   
   <!-- Слайды карусели -->
   <div class="carousel-inner">
     <!-- 1 слайд -->
     <div class="item active">
       <img src="/bootstrap/images/slide1.png" alt="1 слайд">
     </div>
     <!-- 2 слайд -->
     <div class="item">
       <img src="/bootstrap/images/slide2.png" alt="2 слайд">
     </div>
     <!-- 3 слайд -->
     <div class="item">
       <img src="/bootstrap/images/slide3.png" alt="3 слайд">
     </div>
   </div>
   <!-- Система навигации для карусели, с помощью которой осуществляется переход на предыдущий и следующий слайд -->
   <a class="carousel-control left" href="#myCarousel3" 
      data-slide="prev">‹</a>
   <a class="carousel-control right" href="#myCarousel3" 
      data-slide="next">›</a>
</div> 

<!-- Скрипт на языке JavaScript, который выводит всплывающее сообщение перед началом процесса смены слайда -->
<script>
  $(function(){
    $('#myCarousel3').on('slide.bs.carousel', function () {
      alert("Событие срабатывает перед началом процесса смены слайда.");
    });
  });
</script>


   Bootstrap 0    80430 +1

Комментарии (132)

  1. Козлодоевский 19 сентября 2014, 21:41 # +1
    Нормальная идея по контенту ресурса. Кратко, без лишней воды, самое то. Успехов.
    1. Игорь 08 ноября 2014, 13:36 # 0
      А можно ли сделать карусель с несколькими элементами горизонтальную и вертикальную как здесь:
      bayguzin.ru/demo/jsCarouse/
      1. Александр Мальцев 08 ноября 2014, 16:11 # 0
        Bootstrap не позволяет это сделать штатными средствами. Кардинальное изменение возможно только изменением CSS карусели.
        На сайте Bootply можно посмотреть различные модификации карусели Bootstrap.

        Вот несколько интересных решений:
        Bootstrap 3.1 Thumbnail Slider
        Carousel with multi items
        1. Dima 26 мая 2016, 13:34 # 0
          Спасибо! Ваша ссылка очень помогла!
      2. игорь 30 ноября 2014, 21:35 # 0
        Как поставить первый слайдер к себе на сайт? Там стилей css не хватает. Что ж вы полный код не привели?
        1. Александр Мальцев 01 декабря 2014, 12:41 # 0
          Стили для слайдера используются стандартные (Twitter Bootstrap 3). Другие CSS стили для работы карусели не требуется. Чтобы вышеприведенный слайдер работал на вашей веб-странице, к ней необходимо подключить стандартные стили Bootstrap (bootstrap.min.css) и файл с javascript кодом (bootstrap.min.js). Процедура по подключению платформы Bootstrap подробно описана здесь.

          Если не хочется разбираться, то можете скачать архив, в котором подключена платформа Bootstrap и создана html страница Index.html, содержащая вышеприведенный код примера.

          Скачать пример.
        2. romasa 16 февраля 2015, 13:40 # 0
          А можно ли сделать на bootstrap
          www.svenbluege.de/demo/index.php/pageable-list
          Подстроение фотографий? Чтобы они был не одной высоты и ширины?
          1. Александр Мальцев 16 февраля 2015, 16:01 # 0
            romasa, Ваш вопрос к карусели никакого отношения не имеет. Вопросы лучше задавать в соответствующем разделе.

            Из-за объемности ответа, Ваш вопрос будет рассмотрен немного позднее в виде отдельной статьи.
            1. romasa 17 февраля 2015, 11:10 # 0
              Спасибо большое.
          2. Сергей 06 мая 2015, 16:22 # 0
            А можно ли сделать каким-либо образом ссылку с другой страницы на определенный слайд carousel. С помощью якорей не получается. Спасибо.
            1. Александр Мальцев 06 мая 2015, 17:21 # 0
              Можно, но надо как-то передавать через адрес номер слайда.
              1. Через значение якоря… index.html#2
              А в скрипте получать этот слайд и переходить на него
              <script>
              $(document).ready(function(){
                 $('#myCarousel').carousel(parseInt(window.location.hash.substring(1)));
              });
              </script>
              
              2. Используя параметр… index.html?slide=2
              Тут тоже самое. Надо написать скрипт, в котором надо получить этот параметр и перейти на него, используя метод carousel().
              1. Сергей 06 мая 2015, 18:07 # 0
                Спасибо большое, я сам пытался на javascript написать решение, но плохо его знаю пока еще, да и не использовал методы бутстрапа, пытался через удаление класса active и добавление его, сделать, но ничего не выходило. :)
            2. Muks 29 мая 2015, 12:31 # 0
              Подскажите, как прикрутить url к одному из слайдов? чтобы кликнув по слайду человек переходил на другой сайт или страницу???
              чем подробней-тем лучше! ))
              а так, статья Достаточно подробна-Спасибо!!!
              1. Дамир 29 мая 2015, 12:41 # 0
                оберни картинку ссылкой
                1. Александр Мальцев 29 мая 2015, 13:33 # 0
                  Вот ещё подробней :)

                  <!-- Слайды карусели -->
                  <div class="carousel-inner">
                    <!--Слайд 1-->
                    <div class="active item">
                      <a href="URL"><img src="путь к картинке" alt="..."></a>
                    </div>
                    <!--Слайд 2-->
                    <div class="active item">
                      <a href="URL"><img src="путь к картинке" alt="..."></a>
                    </div>
                    ...
                  
                  1. Muks 29 мая 2015, 15:40 # 0
                    Это все понятно. если брать код страницы в бразере, то все видно… НО не могу найти файл, где прописан путь(((
                    вот вырезка кода
                2. Muks 29 мая 2015, 15:41 # 0
                  <div class="index">
                  
                  
                  <section class="slider hidden-xs hidden-sm">
                      <div class="container-fluid">
                          <div class="row">
                  
                              <div class="row">
                                  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                                      <!-- Indicators -->
                                      <ol class="carousel-indicators">
                                                                                            <li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
                  
                                                                        <li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>
                  
                                                                        <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
                  
                                          
                                                          </ol>
                  
                  
                  
                  
                                      <!-- Wrapper for slides -->
                                      <div class="carousel-inner">
                  
                                                                                                      <div class="item">
                                                      <img src="/images/site/cache/5a/2f/5a2f5f5905c8e156b848bcbdcd38152c.jpg" alt="...">
                                                      <div class="carousel-caption">
                  
                                                      </div>
                  
                                                  </div>
                                                                              <div class="item active">
                                                      <img src="/images/site/cache/29/0a/290ab3d62c057c444b0e5f5588bbf645.jpg" alt="...">
                                                      <div class="carousel-caption">
                  
                                                      </div>
                  
                                                  </div>
                                                                              <div class="item">
                                                      <img src="/images/site/cache/25/17/2517a9045e54771d2cbd9abe80bcae68.jpg" alt="...">
                                                      <div class="carousel-caption">
                  
                                                      </div>
                  
                                                  </div>
                                                                      
                                      </div>
                  
                                      <!-- Controls -->
                                      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                                          <span class="glyphicon glyphicon-chevron-left"></span>
                                      </a>
                                      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                                          <span class="glyphicon glyphicon-chevron-right"></span>
                                      </a>
                                  </div>
                              </div>
                          </div>
                      </div>
                  
                  
                  </section>
                  
                  1. Max 01 июня 2015, 11:09 # 0
                    Файл таки нашел..)
                    стоит в нем подбор картинок из цмс…
                    при указании 1 УРЛ все картинки пропадают и не двигаются.
                    вопрос:
                    1.чтоб все работало, нужно прописывать каждую из картинок?
                    2.Можно ли прописать УРЛ, чтоб был на каждой картинке?
                    Сейчас все в таком виде:
                    <?php if(count($gallery)>0):?>
                                                <?php foreach ($gallery as $id=>$photo):?>
                                                    <div class="item <?php echo $id==0?'active':''?>">
                                                        <img src="<?php echo iwi(Yii::getPathOfAlias('webroot').$photo->getUrl())->adaptive(1920,500,true)->cache()?>"  alt="...">
                                                        <div class="carousel-caption">
                    
                                                        </div>
                    
                                                    </div>
                                                <?php endforeach?>
                                            <?php endif;?>
                    1. Александр Мальцев 01 июня 2015, 12:32 # 0
                      Привет, Max.
                      По фреймворку Yii не подскажу, т.к. с ним не работал.
                    2. Mozart 12 июня 2015, 04:11 # 0
                      Uncaught TypeError: $(...).carousel is not a function.

                      Не выходит никак, постоянно это выбивает
                      1. Александр Мальцев 12 июня 2015, 07:37 # 0
                        Mozart проверь подключена ли у тебя платформа Twitter Bootstrap 3 и библиотека jquery. Причем файл bootstrap.min.js должен быть подключен после библиотеки jQuery, т.к. он от неё зависит.

                        Во вторых проверь следующее: у тебя код должен находиться внутри следующей конструкции, иначе у тебя код может начаться выполняться когда библиотеки Twitter Bootstrap 3 и jQuery ещё не загружены.
                        $(document).ready(function() {
                          //код должен быть расположен здесь
                        });
                        
                      2. Дамир 30 июня 2015, 09:47 # 0
                        Привет, в примере кода слайда «Перейти к 0 слайду карусели с помощью соответствующего индекса data-slide-to=»1""
                        там должно быть data-slide-to=«0 1 и 2», у тебя везде 1 написан.
                        1. Александр Мальцев 30 июня 2015, 16:22 # 0
                          Спасибо, Дамир. Поправил.
                        2. Люба 04 июля 2015, 12:26 # 0
                          Спасибо за статью. Оказалась очень полезной.
                          Только вот когда сайт с этой каруселью висит в закладках какое-то время, а потом возвращаешься к нему, то при открытии страницы первый слайд прокручивается на белом фоне, а
                          хотелось бы, чтобы как ушел со страницы, на том слайде, на котором остановилось, страница и осталась, а не заново все начиналось.
                          Как так сделать?
                          1. Александр Мальцев 06 июля 2015, 15:39 # 0
                            Люба, извините, что так долго не отвечал.
                            Для того чтобы это выполнить необходимо сохранить позицию слайда карусели при закрытии страницы (её выгрузке), а потом при открытии страницы воспользовавшись этой информацией перейти на нужную позицию слайда.
                            Для сохранения информации можно использовать cookie или объект LocalStorage.
                            Например вот так:
                            <script>
                            //при выгрузке страницы
                            $(window).unload(function(){
                              //сохраняем индекс слайда карусели в переменную carousel 
                              localStorage.setItem("carousel", $('.carousel-inner div.active').index());
                            });
                            //когда документ загрузился
                            $(document).ready(function () {
                              //переходим на слайд хранящийся в переменной carousel объекта LocalStorage
                              $('.carousel').carousel(parseInt(localStorage.getItem("carousel")));
                            });
                            </script>
                            
                          2. Роман 08 августа 2015, 23:14 # 0
                            Возникла проблема, при масштабировании и переходе на col-sm (телефон) указатели слайдов уезжают под картинку, можно как то это исправить?
                            1. Александр Мальцев 10 августа 2015, 15:20 # 0
                              Проверьте ваши отступы или выложите свой пример на jsfiddle.net
                            2. Maksim 30 октября 2015, 23:23 # 0
                              Александр, здравствуйте.
                              При использовании карусели иногда возникает необходимость возврата на стартовый (нулевой) слайд. Как вариант можно на каждом item разместить button c data-slide-to=«0». Но зачастую пользователи по привычке жмут «Back» в браузерах.
                              А что если на странице с каруселью перехватить нажатие Back. Попробовал решить проблему через скрипт. Прочитал про navigate.
                              <script>
                              $('#MyCarousel').on("navigate", function (event, data) {
                                var direction = data.state.direction;
                                if (direction == 'back') {
                                 $('#MyCarousel').carousel(0);
                                }
                              });
                              </script>
                              
                              Попробовал. Не сработало. Возможно, что navigate в данном случае не вариант. В какую сторону копать?

                              1. Александр Мальцев 31 октября 2015, 16:16 # 0
                                Тут надо читать не про Navigate, а про объект History.
                                В JavaScript есть только событие popstate, которое срабатывает, когда пользователь нажимает Back или Forward в браузере. Отдельного события для Back нет. Т.е. нет стандартного метода, с помощью которого Вы можете это узнать.
                                $(window).bind("popstate",function(event){
                                  ...
                                })
                                
                                Единственный вариант как-то это узнать, это работать с сессией истории, т.е. записывать какие-то циферки и сравнивать их…
                                Почитать про объект History .
                              2. Сергей 09 ноября 2015, 09:27 # 0
                                Здравствуйте Александр! Не знаю заметили ли Вы. На втором примере, текст на кнопках смазывается периодически. Это из-за карусели я так понимаю. Также присмотритесь к аватаркам в комментариях, они также «пляшут». Такое происходит только на этой странице сайта, на остальных всё в порядке. У меня на сайте таже проблема, никак не могу её решить…
                                1. Александр Мальцев 09 ноября 2015, 13:22 # 0
                                  Здравствуйте, Сергей!
                                  Раньше как-то не замечал. И насколько я понял это происходит в Chrome (webkit) и связано с анимацией (в данном случае с каруселью). Тут надо копать в сторону CSS свойств, влияющих на рендеринг шрифта в Chrome. Можно посмотреть в сторону -webkit-font-smoothing или других свойств: -webkit-transform: translate3d( 0, 0, 0), -webkit-filter: blur(0) и т.д.
                                  Попробуйте добавить это свойство CSS: -webkit-transform: translateZ(0px);
                                2. Андрей 11 ноября 2015, 18:11 # 0
                                  Здравствуйте. У меня карусель на всю страницу окна. Но, если попадаются изображения меньшей ширины, они центрируются в карусели по левому краю. Можно ли сделать, чтобы они были в карусели по центру?
                                  Скриншот:
                                  1. Александр Мальцев 12 ноября 2015, 14:24 # 0
                                    Здравствуйте, Андрей.
                                    Добавьте к изображениям класс .center-block.
                                    <img class="center-block" src="...">
                                    
                                    1. Андрей 12 ноября 2015, 15:12 # 0
                                      Спасибо. Еще маленький вопрос. Вверху отступов нет. А внизу появляется под картинкой отступ в 20пикселей. Думал паддинг. Пытался поймать в каком блоке. Не нашел. На скрине красным пометил область. Как исправить?

                                      1. Андрей 12 ноября 2015, 15:26 # 0
                                        Все нашел косяк)
                                        1. Александр Мальцев 12 ноября 2015, 15:40 # 0
                                          Не знаю как у Вас там всё организовано.
                                          Попробуйте установить слайдам карусели и картинкам одинаковую высоту.
                                          Например, 400px:
                                          .carousel img, .item {
                                            height: 400px !important;
                                          }
                                          
                                    2. Михаил 12 ноября 2015, 18:27 # 0
                                      Александр, подскажите пожалуйста как сделать так, чтобы при обновлении страницы он начинал с разных слайдов. Измучился капец. Прикладываю код.
                                      JS
                                      console.log('catch up');
                                      
                                      (function ($) {
                                        
                                      var $item = $('.carousel .item');
                                      var $wHeight = $(window).height();
                                      
                                      console.log('catch up1');
                                      
                                      $item.height($wHeight); 
                                      $item.addClass('full-screen');
                                      
                                      console.log('catch up2');
                                      
                                      var $numberofSlides = $('.item').length;
                                      var $currentSlide = Math.floor((Math.random() * $numberofSlides));
                                      
                                      console.log('catch up3');
                                      
                                      $('.carousel-indicators li').each(function(){
                                        var $slideValue = $(this).attr('data-slide-to');
                                        if($currentSlide == $slideValue) {
                                          $(this).addClass('active');
                                          $item.eq($slideValue).addClass('active');
                                        } else {
                                          $(this).removeClass('active');
                                          $item.eq($slideValue).removeClass('active');
                                        }
                                      });
                                      
                                      console.log('catch up4');
                                      
                                      $('.carousel img').each(function() {
                                        var $src = $(this).attr('src');
                                        var $color = $(this).attr('data-color');
                                        $(this).parent().css({
                                          'background-image' : 'url(' + $src + ')',
                                          'background-color' : $color
                                        });
                                        $(this).remove();
                                      });
                                      
                                      console.log('catch up5');
                                      
                                      $(window).on('resize', function (){
                                        $wHeight = $(window).height();
                                        $item.height($wHeight);
                                      });
                                      
                                      console.log('catch up6');
                                      
                                      $('.carousel').carousel({
                                        interval: 1000,
                                        pause: "false"
                                      });
                                      console.log('catch up7');
                                      })(jQuery);
                                      
                                      HTML
                                         <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="6000">
                                             <div class="carousel slide article-slide" id="myCarousel">
                                            <div class="carousel-inner cont-slider" role="listbox">
                                                
                                          <div class="item">
                                                <img src="https://unsplash.it/2000/1250?image=675">
                                              </div>
                                      		<div class="item">
                                                <img src="https://unsplash.it/2000/1250?image=658">
                                              </div>
                                      		<div class="item">
                                                <img src="https://unsplash.it/2000/1250?image=689">
                                              </div>
                                              <div class="item">
                                                <img src="https://unsplash.it/2000/1250?image=638">
                                              </div>   
                                              <div class="item">
                                                <img src="https://unsplash.it/2000/1250?image=675">
                                              </div> 
                                              <div class="item">
                                                <img src="https://unsplash.it/2000/1250?image=397">
                                              </div> 		 
                                            </div>
                                            
                                            <!-- Indicators -->
                                            <ol class="carousel-indicators visible-lg visible-md">
                                                  <li class="" data-slide-to="0" data-target="#myCarousel">
                                                <img alt="" title="" src="https://unsplash.it/2000/1250?image=658">
                                              </li>  
                                      		      <li class="" data-slide-to="1" data-target="#myCarousel">
                                                <img alt="" title="" src="https://unsplash.it/2000/1250?image=638">
                                              </li> 
                                      		      <li class="" data-slide-to="2" data-target="#myCarousel">
                                                <img alt="" title="" src="https://unsplash.it/2000/1250?image=658">
                                              </li> 
                                                     <li class="" data-slide-to="3" data-target="#myCarousel">
                                                <img alt="" title="" src="https://unsplash.it/2000/1250?image=675">
                                              </li>       
                                              <li class="" data-slide-to="4" data-target="#myCarousel">
                                                <img alt="" title="" src="https://unsplash.it/2000/1250?image=689">
                                              </li>  
                                              <li class="" data-slide-to="5" data-target="#myCarousel">
                                                <img alt="" title="" src="https://unsplash.it/2000/1250?image=397">
                                              </li>    		
                                            </ol>                 
                                          </div>
                                      	          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                                                  <i class="fa fa-angle-left glyphicon glyphicon-chevron-left"></i>
                                                </a>
                                                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                                                  <i class="fa fa-angle-right glyphicon glyphicon-chevron-right"></i>
                                                </a>
                                              </div>
                                      
                                      1. Александр Мальцев 14 ноября 2015, 04:02 # 0
                                        Михаил, не знаю чего Вы там намудрили.
                                        Для того чтобы перейти на случайный слайд достаточно написать такой скрипт:
                                        // количество слайдов
                                        var numberSlides = $(".carousel div.item").length;
                                        // номер случайного слайда
                                        var randomSlide = Math.round(Math.random()*(numberSlides-1));
                                        // перейти на случайный слайд
                                        $(".carousel").carousel(randomSlide);
                                        
                                        1. Михаил 03 декабря 2015, 09:42 # 0
                                          Все равно не работает :)
                                      2. Vo 16 ноября 2015, 12:33 # 0
                                        Здравствуйте, Александр! Вы уже помогли мне один раз, надеюсь, не откажете и сегодня)) Вопросов несколько, если можно.
                                        1. Как переместить индикаторы для карусели?
                                        Необходимо переместить индикаторы для карусели вниз (как на картинке, пункт 1). При этом, если я перемещаю их с помощью margin, то автоматически изменяется высота всего слайдера и кнопки перехода смещаются (на картинке пункт 2), а они должны быть отцентрированы по вертикали относительно «полезного» содержимого слайдера. Если вынести код с переключателями за пределы карусели, вот так, например:
                                        <div class="carousel slide">
                                          <ol class="carousel-indicators">
                                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                            <li data-target="#myCarousel" data-slide-to="1"></li>
                                            <li data-target="#myCarousel" data-slide-to="2"></li>
                                          </ol>
                                        </div>
                                        то переключатели перестают корректно отображаться (они работают, т.е. переключают слайды, но активен всегда только левый переключатель вне зависимости от того, какой из них я нажимаю). Наверное, это связано с там, что блок с переключателями должен быть внутри блока с id, например, id=«myCarousel».
                                        2. Как убрать области для переключения слайдов (на картинке — пункт 3) и сделать так, чтобы переключение осуществлялось только кнопками (< и >)?
                                        3. Можно ли перенести переключатели таким образом, как на этой картинке и если да, то как?
                                        1. Vo 16 ноября 2015, 12:38 # 0
                                          Почему-то картинок не видно… А если добавлять через «Загрузить картинку», то пишут, что доступ запрещён. Вот картинки: www.screencast.com/t/YORKRfP2v и www.screencast.com/t/WNAeNNqyS
                                          1. Александр Мальцев 16 ноября 2015, 14:42 # 0
                                            Вы скорее всего не авторизованы…
                                        2. Vo 16 ноября 2015, 14:00 # 0
                                          С вопросами 1 и 3 разобрался сам)) Если можно, ответьте на вопрос 2. Спасибо.
                                          1. Александр Мальцев 16 ноября 2015, 14:40 # 0
                                            Здравствуйте.
                                            Попробуйте изменить HTML-код кнопок.
                                            Например для левой:
                                            <div class="carousel-control left">
                                              <a href="#myCarousel" data-slide="prev">
                                                <span class="glyphicon glyphicon-chevron-left"></span>
                                              </a>
                                            </div>
                                            
                                            Ну и конечно переопределить стили CSS:
                                            .carousel-control:hover, .carousel-control:focus {
                                              ...
                                            }
                                            
                                          2. bulls 20 ноября 2015, 17:28 # 0
                                            Во втором топике, вы привели отличный пример «Bootstrap 3.1 Thumbnail Slider», не подскажете если изображений не 12 а девять?
                                            Можно как то прописать, что бы после последнего изображения, подставлялись новые с самого начала, без пустых блоков пробелов
                                            1. Александр Мальцев 21 ноября 2015, 15:13 # 0
                                              Попробуйте просто изменить сетку, чтобы у Вас выводилось 3 по 3.
                                              Т.е. внутри блоков с классом .row изменить содержимое на:
                                              <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500x500" 
                                              alt="" class="img-responsive"></a></div>
                                              <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500x500" 
                                              alt="" class="img-responsive"></a></div>
                                              <div class="col-xs-4"><a href="#"><img src="http://placehold.it/500x500" 
                                              alt="" class="img-responsive"></a></div>
                                              
                                              1. bulls 21 ноября 2015, 15:41 # 0
                                                Александр, спасибо Вам, все получилось!
                                            2. Dina 26 ноября 2015, 19:46 # 0
                                              Александр, здравствуйте!
                                              Спасибо вам за сайт — он просто находка.
                                              Я с помощью ваших объяснений смогла поместить картинки карусели в jumbotron (слева текст и ссылки, справа — картинки меняются). Единственное, с чем я не могу разобраться — это убрать затемнения по краям карусели. Они прописаны в bootstrap.css. Не подскажете, как от них избавиться?

                                              Спасибо!
                                              1. Александр Мальцев 28 ноября 2015, 12:37 # 0
                                                Здравствуйте, Дина!
                                                Используйте следующие CSS стили:
                                                .carousel-control.left, .carousel-control.right {
                                                  background-image: none;
                                                  filter: none;
                                                }
                                                
                                                1. Dina 30 ноября 2015, 11:23 # 0
                                                  Сработало! спасибо :-)
                                                  1. Dina 03 декабря 2015, 11:36 # 0
                                                    Александр, добрый день, у меня опять вопрос.
                                                    Карусель выглядит прекрасно на большом и среднем экранах. На айфоне 5 и 6, и на айпаде тело карусели вытянуто, глифы-стрелки внизу картинки, кружочки-индикаторы — далеко внизу от картинки; их даже и не видно, потому что фон белый, и кружочки белые. Это вертикально. Когда айфон поворачиваю горизонтально, то кружочки-индикаторы встают на место, но тело карусели вытягивается по всей длине, а вот картинки не вытягиваются, хотя я и поставила класс class=«img-responsive img-thumbnail». Кстати, на первый слайд класс img-thumbnail почему-то не распространяется, второй и третий в рамочке, а первый нет.
                                                    Вопрос: как сделать, чтобы и на смартфоне у которого ширина экрана меньше 768рх, и на планшетах карусель выглядела так же красиво как и на больших экранах, и как поправить вид карусели на горизонтальном экране?
                                                    А еще я добавила иконки соц сетей (взяла с сайтов фейсбука, твиттера и пинтереста, чтобы сразу можно было твиттить/шарить, а не открывать соответствующую страницу) — и jumbotron сразу съёжился, но только на айфоне 5 и 6, на айпаде все нормуль.
                                                    вот HTML:
                                                    <!-- Main jumbotron for a primary marketing message or call to action -->
                                                        <div class="jumbotron">
                                                          <div class="container">
                                                    		<div class="col-lg-7 col-md-7 col-sm-7 col-xs-12">
                                                    			<h1>Need ideas for gorgeous Christmas presents?</h1>
                                                    			<p>Delicately hand-crafted jewellery to reflect your individuality.</p>
                                                    			<p><a class="btn btn-primary btn-lg" href="gallery.html" role="button">View Gallery »</a></p>
                                                    		</div>
                                                    		<div class="col-lg-5 col-md-5 col-sm-5 col-xs-12" >
                                                    			<div id="myCarousel" class="carousel slide" data-ride="carousel">
                                                    				<ol class="carousel-indicators">
                                                    					<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                                    					<li data-target="#myCarousel" data-slide-to="1"></li>
                                                    					<li data-target="#myCarousel" data-slide-to="2"></li>
                                                    				</ol>  
                                                    			<div class="carousel-inner" role="listbox">
                                                    				<div class="item active">
                                                    					<a href="https://www.etsy.com/listing/250238064/gold-pearl-bracelet?ref=shop_home_active_17">
                                                    						<img class="first-slide" src="components/images/gold-filled-with-pearl-bracelet1.jpg" class="img-responsive img-thumbnail" alt="First slide">
                                                    					</a>
                                                    				</div>
                                                    				<div class="item">
                                                    					<a href="https://www.etsy.com/listing/250154855/silver-teal-crystal-necklace?ref=shop_home_active_20">
                                                    						<img src="components/images/silver-with-teal-crystal-necklace1.jpg" class="img-responsive img-thumbnail" alt="Second slide">
                                                    					</a>
                                                    				</div>
                                                    				<div class="item">
                                                    					<a href="https://www.etsy.com/listing/250166947/gold-pearl-drop-earrings?ref=shop_home_active_9">
                                                    						<img src="components/images/Gold-with-pearl-tear-drop-earrings.jpg" class="img-responsive img-thumbnail" alt="Third slide">
                                                    					</a>
                                                    				</div>
                                                    			</div>
                                                    				<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                                    					<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                                    					<span class="sr-only">Previous</span>
                                                    				</a>
                                                    				<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                                    					<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                                    					<span class="sr-only">Next</span>
                                                    				</a>
                                                    			</div>
                                                    		</div>
                                                          </div>
                                                        </div>
                                                    	<div class="container">
                                                          <!-- Example row of columns -->
                                                          <div class="row">
                                                            <div class="col-md-4">
                                                              <h2>Unique style</h2>
                                                              <p>Some words about style?</p>
                                                              <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
                                                            </div>
                                                            <div class="col-md-4">
                                                              <h2>Can be tailored for perfect fit</h2>
                                                              <p>Some blah-blah here</p>
                                                              <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
                                                           </div>
                                                            <div class="col-md-4">
                                                              <h2>High quality artistry</h2>
                                                              <p>Dus ac cursus commodo.</p>
                                                              <p><a class="btn btn-default" href="#" role="button">View details »</a></p>
                                                            </div>
                                                          </div>
                                                    	<footer>
                                                    		<div class="container">
                                                    			<div class="row">
                                                    				<div id="footer-info" class="col-lg-2 col-md-3 col-sm-5 col-xs-12">
                                                    					<p>© SnowflakeDesigns</p>        
                                                    				</div>
                                                    				<div class="col-lg-10 col-md-9 col-sm-7 col-xs-12">
                                                    					<!--Tweet It-->
                                                    					<a href="https://twitter.com/share" class="twitter-share-button"{count} data-url="https://twitter.com/SnowflakeDes">Tweet</a>
                                                    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
                                                    					<!--Pin It-->
                                                    					<a data-pin-do="buttonBookmark" data-pin-round="true" href="https://www.pinterest.com/dinakazantseva/snowflake-designs/">
                                                    					<img src="https://assets.pinterest.com/images/pidgets/pinit_fg_en_round_red_16.png" />
                                                    					</a>
                                                    					<script async defer src="https://assets.pinterest.com/js/pinit.js"></script>
                                                    					<!--Like/Share It-->
                                                    					<script>(function(d, s, id) {
                                                    						var js, fjs = d.getElementsByTagName(s)[0];
                                                    						if (d.getElementById(id)) return;
                                                    						js = d.createElement(s); js.id = id;
                                                    						js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
                                                    						fjs.parentNode.insertBefore(js, fjs);
                                                    						}
                                                    						(document, 'script', 'facebook-jssdk'));
                                                    					</script>
                                                    					<div class="fb-like" data-href="https://www.facebook.com/snowflakedesignsUK/?fref=pb&hc_location=profile_browser" data-layout="standard" data-action="like" data-show-faces="true" data-share="true">
                                                    					</div>
                                                    				</div>
                                                    			</div>
                                                    		</div>
                                                    	</footer>	
                                                        </div>
                                                    
                                                    & CSS:
                                                    body {
                                                      background-color: white;
                                                      padding-top: 20px;
                                                      padding-bottom: 20px;
                                                      font-family: 'Josefin Sans', Helvetica, Arial, sans-serif;
                                                      }
                                                    .jumbotron {
                                                    	background-color: white;
                                                    }
                                                    .jumbotron h1 {
                                                    	font-family: 'Delius', cursive;
                                                    	color: #aa3d01;
                                                    	}
                                                    h2 {
                                                    	color: #aa3d01;
                                                    }
                                                    
                                                    p {
                                                    	color: #df861d;
                                                    	font-size: 18px;
                                                    	line-height: 25px;
                                                    	margin-top: 15px;
                                                    }
                                                    .logo-icon {
                                                    	margin-right: 10px;
                                                    }
                                                    
                                                    .jumbotron {
                                                    	padding-bottom: 10px;
                                                    }
                                                    .carousel {
                                                      height: 300px;
                                                      margin-bottom: 10px;
                                                    }
                                                    /* Since positioning the image, we need to help out the caption */
                                                    .carousel-caption {
                                                      z-index: 10;
                                                    }
                                                    
                                                    /* Declare heights because of positioning of img element */
                                                    .carousel .item {
                                                    
                                                      background-color: #fff;
                                                    }
                                                    .carousel-inner > .item > img {
                                                      position: absolute;
                                                      top: 0;
                                                      left: 0;
                                                      min-width: 100%;
                                                    
                                                    }
                                                    .carousel-control.left, .carousel-control.right {
                                                      background-image: none;
                                                      filter: none;
                                                      vertical-align: center
                                                    }
                                                    
                                                    }
                                                    @media screen and (min-width: 768px) {
                                                      .carousel-control .glyphicon-chevron-left,
                                                      .carousel-control .glyphicon-chevron-right,
                                                      .carousel-control .icon-prev,
                                                      .carousel-control .icon-next {
                                                        width: 30px;
                                                        height: 30px;
                                                        margin-top: -15px;
                                                        font-size: 30px;
                                                    	vertical-align: center
                                                      }
                                                      .carousel-control .glyphicon-chevron-left,
                                                      .carousel-control .icon-prev {
                                                        margin-left: -15px;
                                                      }
                                                      .carousel-control .glyphicon-chevron-right,
                                                      .carousel-control .icon-next {
                                                        margin-right: -15px;
                                                      }
                                                      .carousel-caption {
                                                        right: 20%;
                                                        left: 20%;
                                                        padding-bottom: 30px;
                                                      }
                                                      .carousel-indicators {
                                                        bottom: 20px;
                                                      }
                                                    }
                                                    
                                              2. Dina 03 декабря 2015, 11:41 # 0
                                                Вот еще кусочек кода:
                                                @media (min-width: 768px) {
                                                  /* Navbar positioning foo */
                                                  .navbar-wrapper {
                                                    margin-top: 20px;
                                                  }
                                                  .navbar-wrapper .container {
                                                    padding-right: 15px;
                                                    padding-left: 15px;
                                                  }
                                                  .navbar-wrapper .navbar {
                                                    padding-right: 0;
                                                    padding-left: 0;
                                                  }
                                                
                                                  /* The navbar becomes detached from the top, so we round the corners */
                                                  .navbar-wrapper .navbar {
                                                    border-radius: 4px;
                                                  }
                                                
                                                  /* Bump up size of carousel content */
                                                  .carousel-caption p {
                                                    margin-bottom: 20px;
                                                    font-size: 21px;
                                                    line-height: 1.4;
                                                  }
                                                
                                                  .featurette-heading {
                                                    font-size: 50px;
                                                  }
                                                }
                                                
                                                @media (min-width: 992px) {
                                                  .featurette-heading {
                                                    margin-top: 120px;
                                                  }
                                                }
                                                1. Dina 03 декабря 2015, 17:08 # 0
                                                  Апдейт: с проблемой первой картинки в карусели (не было рамочки) разобралась, равно как и со съеживанием элементов после добавления кнопки фейсбука (просто поменяла класс кнопки). А вот с высотой карусели не знаю что и делать…
                                                2. Ivan 25 декабря 2015, 12:58 # 0
                                                  Александр, здравствуйте, такой вопрос появился: поставил стандартный слайдера бутстрапа, загрузил свои картинки, но никак не получается настроить высоту, картинки уезжают за экран.
                                                  Настраивать картинки в фотошопе не пойдет, так как надо чтобы на всех экранах примерно одинаково смотрелось. Помогите пожалуйста с решением этого вопроса.
                                                  1. Александр Мальцев 25 декабря 2015, 13:13 # 0
                                                    Здравствуйте, Иван.
                                                    Пропишите в CSS:
                                                    img {
                                                      display: block;
                                                      max-width: 100%;
                                                      height: auto;
                                                    }
                                                    
                                                    Это сделает картинки адаптивными.
                                                  2. Александр 12 января 2016, 14:16 # 0
                                                    Здравствуйте Александр!
                                                    Есть сайт 124print.ru/1102.html
                                                    Подскажите пожалуйста как убрать адаптивность картинок в галерее? Голову сломал уже, не знаю что делать.
                                                    Т.е. размер окна изменяется когда картинка переходит на другую.
                                                    Заранее благодарен!
                                                    1. Александр Мальцев 13 января 2016, 12:25 # 0
                                                      Здравствуйте.
                                                      Не думаю, что удаление адаптивности у картинок это очень хорошая идея, тем более что она Вам не поможет. Адаптивная картинка — это такая, которая не вылезет за пределы контейнера (элемента), т.е. не превышает его доступной ширины. Таким образом, если размер картинки больше доступной ширины контейнера, то она уменьшается. Ширина картинки, становится равной доступной ширине контейнера. Кроме ширины, у картинки пропорционально изменяется ещё и высота. Например, если картинка имеет размеры 1280x720, а доступная ширина контейнера 600px, то картинка будет иметь размеры 600×338. Другая картинка, например, имеет размеры 1440×810. В этом же контейнере она будет иметь точно такие же размеры, т.е. 600x338. Это происходит из-за того что у них одинаковые соотношения сторон. Т.е. такие изображения в карусели и галереи будет выглядеть очень хорошо. А если у Вас используются изображения, у которых соотношения сторон разные, то так не получится. Из-за того что у Ваших изображений при одинаковой ширине будет разная высота. Выйти из этого положения можно разными способами. Например, использовать изображения, у которых соотношения сторон одинаковые. Если это невозможно, то необходимо реализовать обрезку (crop) изображений. Это можно сделать как на стороне сервера (например, с помощью php), так и на стороне клиента (с помощью JavaScript). Или вообще поступить другим, более простым способом. Выбрать какое-то соотношение сторон (например, 16:9) для карусели и использовать CSS свойство overflow для скрытия той части изображения, которая будет вылазить за данные пределы.
                                                    2. Александр 12 января 2016, 14:21 # 0
                                                      Или скажите пожалуйста каким элементом это управляется? Не могу отыскать в CSS.
                                                      1. Александр Мальцев 13 января 2016, 12:30 # 0
                                                        Убрать адаптивность у картинки можно следующим образом:
                                                        Добавить в CSS следующий код:
                                                        img {
                                                          max-width: none !important;
                                                        }
                                                        
                                                        Кроме этого, изображения по умолчанию inline. То можно, добавить при необходимости ещё и следующее:
                                                        img {
                                                          max-width: none !important;
                                                          display: inline;
                                                        }
                                                        
                                                      2. Андрей 13 января 2016, 04:10 # 0
                                                        Приветствую вас
                                                        Возникла проблема. При проверке на адаптивность в гугл хром броузере,
                                                        картинки выходят за пределы блока. Как это можно поправить?
                                                        вот пример кода
                                                        Код CSS и HTML
                                                         <\div class="row">
                                                                <\div class="col-md-12 col-ms-12">
                                                                    <\div id="owl-carousel" class="owl-carousel">
                                                                       
                                                                    <?php foreach($AllPosts as $arr) {?>
                                                                        <\div class="reviev_item">
                                                                            <\div class="image_wrap">
                                                                                <\a href=<?= Yii::getAlias('@web')?>"<?= $arr->img ?>" class="popup">
                                                                                    <i\mg src="<?= $arr->img ?>" alt="...">
                                                        
                                                                            <\/div>
                                                                            <\h4><?php echo $arr['user']->username; ?></h4>
                                                                            <\div class="hr"></div>
                                                                            <\div class="row">
                                                                                <\p class="col-md-8"><?= $arr->anons?></p>
                                                                            <\/div>
                                                                        <\/div>
                                                                    <?php } ?>
                                                                <\/div>
                                                              <\/div>
                                                            <\/div>
                                                        

                                                        спасибо
                                                        1. Александр Мальцев 13 января 2016, 11:51 # 0
                                                          Здравствуйте, Андрей.
                                                          Добавить в CSS следующий код:
                                                          #owl-carousel img {
                                                            display: block;
                                                            max-width: 100%;
                                                            height: auto;
                                                          }
                                                          
                                                          Или в добавьте в Ваш код к элементу img класс img-responsive.
                                                          1. Андрей 13 января 2016, 13:18 # 0
                                                            Здравствуйте Александр.
                                                            Спасибо за быстрый ответ.
                                                            Не помогло.
                                                            Наверное я не корректно сформулировал вопрос.
                                                            У меня получается, что видна вся лента картинок. Они как бы двигаются и если не менять
                                                            размер окна броузера, то видна только нужная картинка. Но при смене размера экрана до 50% -уже видна вся лента.

                                                            <div class="container">/*это блок где должна быть картинка видна*/
                                                            <\div class="row">
                                                                    <\div class="col-md-12 col-ms-12">
                                                                        <\div id="owl-carousel" class="owl-carousel">
                                                                           
                                                                        <?php foreach($AllPosts as $arr) {?>
                                                                            <\div class="reviev_item">
                                                                                <\div class="image_wrap">
                                                                                    <\a href=<?= Yii::getAlias('@web')?>"<?= $arr->img ?>" class="popup">
                                                                                        <i\mg src="<?= $arr->img ?>" alt="...">
                                                            
                                                                                <\/div>
                                                                                <\h4><?php echo $arr['user']->username; ?></h4>
                                                                                <\div class="hr"></div>
                                                                                <\div class="row">
                                                                                    <\p class="col-md-8"><?= $arr->anons?></p>
                                                                                <\/div>
                                                                            <\/div>
                                                                        <?php } ?>
                                                                    <\/div>
                                                                  <\/div>
                                                                <\/div>
                                                            </div>
                                                            
                                                        2. Татьяна 16 февраля 2016, 12:44 # 0
                                                          при масштабировании и переходе на col-sm (телефон) указатели слайдов уезжают под картинку а картинка ужимается по ширине но и по высоте к сожалению тоже — в результате остается пустое место под картинкой на котором одинокие переключатели, можно как то это исправить?
                                                          1. Александр Мальцев 18 февраля 2016, 15:40 # 0
                                                            Если не хотите чтобы картинки изменялись по ширине, то установите им фиксированную ширину, но тогда об адаптивности стоит забыть. Карусель необходимо правильно настроить, тогда ничего переносится и оставаться не будет.
                                                            1. Татьяна 19 февраля 2016, 13:39 # 0
                                                              Вот и вопрос как правильно ее настроить??? может я что-то упустила?
                                                              1. Александр Мальцев 21 февраля 2016, 07:36 # 0
                                                                Тут всё зависит от задачи.
                                                                Если Вам необходимо сделать карусель адаптивной, то:
                                                                1. Необходимо, добавить к картинкам класс img-responsive.
                                                                2. Разобраться с максимальной шириной карусели, которая будет завесить от ширины изображений. Если ширина карусели будет меньше ширины контейнера в которую она помещена, то отцентрировать карусель.
                                                                <div id="myCarousel" class="carousel slide" style="max-width:600px; margin:0 auto">
                                                                  ...
                                                                </div>
                                                                
                                                                3. Перейти к рассмотрению изображений, а именно отношения высоты и ширины. Необходимо чтобы этот показатель был у всех изображений одинаковый. Если это невозможно, то необходимо каким-то образом изображения подготовить, можно, например, с помощью JavaScript.

                                                                Если в адаптивности нет необходимости и карусель необходимо сделать фиксированной, то можно так (картинки 800x300):
                                                                /* CSS */
                                                                .carousel-inner > .item > img, .carousel {
                                                                  width:800px;
                                                                  height:300px;
                                                                }
                                                                
                                                          2. Евгений 17 февраля 2016, 10:34 # 0
                                                            Как сделать чтобы на больших мониторах карусель отображалась как у вас в примере( т.е. с маркерами и текстом на слайде, а на мобильных устройствах эта же карусель, только уже текст размещался под слайдеров и когда человек нажимает на картинку меняется и слайд и текст под ним. Помогите пожалуйста…
                                                            1. Александр Мальцев 18 февраля 2016, 15:30 # 0
                                                              Для этого необходимо:
                                                              1. Создать блок div под слайдом (например, с id равным carousel-caption). Добавить к этому блоку видимость только на xs устройствах (visible-xs-block).
                                                              2. Добавить к каждому блоку с классом carousel-caption ещё один класс hidden-xs. Он будет скрывать его на xs устройствах.
                                                              3. Написать скрипт, который при смена слайда будет отображать в блоке с #carousel-caption содержимое активного блока, имеющего класс carousel-caption.
                                                              Код HTML + JavaScript
                                                              <div id="myCarousel" class="carousel slide" data-ride="carousel" style="max-width:800px; margin: 0 auto;">
                                                                <!-- Индикаторы -->
                                                                <ol class="carousel-indicators">
                                                                  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                                                  <li data-target="#myCarousel" data-slide-to="1"></li>
                                                                  <li data-target="#myCarousel" data-slide-to="2"></li>
                                                                </ol>
                                                                <!-- Обёртка для слайдов -->
                                                                <div class="carousel-inner" role="listbox">
                                                                  <div class="item active">
                                                                    <img class="img-responsive" src="img/image01-800x600.jpg" alt="...">
                                                                    <div class="carousel-caption hidden-xs">
                                                                      <h3>1 слайд</h3>
                                                                      <p>Содержание 1 слайда</p>
                                                                    </div>
                                                                  </div>
                                                                  <div class="item">
                                                                    <img class="img-responsive" src="img/image02-800x600.jpg" alt="...">
                                                                    <div class="carousel-caption hidden-xs">
                                                                      <h3>2 слайд</h3>
                                                                      <p>Содержание 2 слайда</p>
                                                                    </div>
                                                                  </div>
                                                                  <div class="item">
                                                                    <img class="img-responsive" src="img/image03-800x600.jpg" alt="...">
                                                                    <div class="carousel-caption hidden-xs">
                                                                      <h3>3 слайд</h3>
                                                                      <p>Содержание 3 слайда</p>
                                                                    </div>
                                                                  </div>
                                                                </div>
                                                                <!-- Кнопки управления слайдом -->
                                                                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                                                  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                                                  <span class="sr-only">Previous</span>
                                                                </a>
                                                                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                                                  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                                                  <span class="sr-only">Next</span>
                                                                </a>
                                                              </div>
                                                              <div id="carousel-caption" style="margin: 0 auto;" class="text-center visible-xs-block"></div>
                                                              <script>
                                                              $(function() {
                                                                var carouselCaption = $('#carousel-caption');
                                                                carouselCaption.html($('#myCarousel .item.active .carousel-caption').html());
                                                                $('#myCarousel').on('slide.bs.carousel', function(e) {
                                                                  carouselCaption.html($(e.relatedTarget).find('.carousel-caption').html());
                                                                });
                                                              });
                                                              </script>
                                                              
                                                              1. Евгений 18 февраля 2016, 16:47 # 0
                                                                Спасибо большое!
                                                            2. Дмитрий 29 февраля 2016, 18:39 # 0
                                                              Александр, подскажите пожалуйста, у меня в карусели картинки разных размеров, и при переключении карусель меняет свой размер под картинки, как сделать фиксированую высоту и что бы картинки становилсись по высоте в 500px?
                                                              1. Александр Мальцев 03 апреля 2016, 09:29 # 0
                                                                Посмотрите этот комментарий:
                                                                itchief.ru/lessons/bootstrap-3/bootstrap-3-carousel#comment-1525
                                                              2. Святослав 28 марта 2016, 23:12 # 0
                                                                Здравствуйте! Настроил стандартную карусель бутстрап, все отлично работает, но появился такой вопрос, можно ли сделать так, чтобы на устройствах с сенсорными экранами слайды менялись по свайпу влево и вправо(пользователям так привычнее менять картинки). Заранее Вам благодарен!
                                                                1. Александр Мальцев 03 апреля 2016, 09:27 # 0
                                                                  Здравствуйте.
                                                                  Попробуйте _https://github.com/ixisio/bootstrap-touch-carousel/archive/master.zip
                                                                  После скачивания необходимо подключить следующие файлы к своему проекту:
                                                                  1) bootstrap-touch-carousel.css
                                                                  2) bootstrap-touch-carousel.js
                                                                  1. Роман 24 мая 2016, 14:27 # 0
                                                                    Алексантд, здравствуйте! Попробовал этим способом заставить карусель воспринимать свайп, в результате вся страница при загрузке на iPhone развалилась. А, есть какой то более вменяемый способ заставить слайдер листаться пальцем на тач-экране? За ранее спасибо!!!
                                                                2. Татьяна 29 марта 2016, 17:38 # 0
                                                                  Здравствуйте! Я новичок. Делаю сайт с нуля в друпале с помощью модулей, но похоже нужно что-то подкорректировать в HTML-файле. Суть: сделала карусель, работает прекрасно. Хочу, чтобы фото были ссылками на страницы(разделы сайта). Увидела у вас выше решение проблемы, попыталась сделать так же. Но у меня так и остались картинки ссылками на страницы слайдшоу (content/node).
                                                                  itchief.ru/assets/uploadify/7/d/4/7d42951206c8ff7aa02543de2abfccc2.png
                                                                  в файле видно, что на первую картинку прописала путь на страницу сайта,
                                                                  a href=«url»
                                                                  но при нажатии переходит на содержимое «книга рецептов», которое сделала для слайдшоу.
                                                                  вторая картинка так и осталась
                                                                  a href="/content/абракадабра"
                                                                  и при нажатии так же переходит по своему уже content/node2
                                                                  Карусель делала при помощи модулей: views, ctools, views bootstrap.
                                                                  Можете помочь? или легче сделать эти страницы для слайдшоу разделами сайта.
                                                                  Возможно нужна еще какая-то информация?
                                                                  1. Александр Мальцев 03 апреля 2016, 09:37 # 0
                                                                    А что на Drupal нет возможности просто вставить готовый кусок HTML-кода? Зачем столько модулей? Тем более, что href насколько я понял, Вы прописываете сами. Я не знаю Drupal :) Но, на MODX я просто могу вставить готовый кусок кода карусели в шаблон и он будет отображаться на всех необходимых мне ресурсах.
                                                                  2. Татьяна 03 апреля 2016, 11:55 # 0
                                                                    Спасибо за ответ. Уже позже заметила, что не сохраняются изменения в коде. В друпале видимо все по-другому.
                                                                    1. Олег 07 апреля 2016, 20:15 # 0
                                                                      Здравствуйте! Александр, подскажите пожалуйста, как сделать, что бы при каждом новом обновлении страницы показывался случайный слайд? Или как сделать переключение слайдов в случайном порядке?
                                                                      1. Александр Мальцев 08 апреля 2016, 11:55 # 0
                                                                        Здравствуйте.
                                                                        Случайный слайд при загрузке:
                                                                        itchief.ru/lessons/bootstrap-3/bootstrap-3-carousel#comment-825
                                                                        Переключение слайдов в случайном порядке + случайный слайд при загрузке:
                                                                        $(function(){
                                                                          var numberSlides = $(".carousel div.item").length;
                                                                          var currentSlide = Math.round(Math.random()*(numberSlides-1));
                                                                          var randomSlide = currentSlide;
                                                                          $(".carousel").carousel(currentSlide);
                                                                          setInterval(function(){ 
                                                                            while(randomSlide == currentSlide){
                                                                              randomSlide = Math.round(Math.random()*(numberSlides-1));
                                                                            }
                                                                            currentSlide = randomSlide;
                                                                            $('#myCarousel').carousel(randomSlide);
                                                                          },3000);
                                                                        });
                                                                        
                                                                        1. Олег 14 апреля 2016, 16:59 # 0
                                                                          Спасибо!
                                                                      2. Олег 26 апреля 2016, 10:33 # 0
                                                                        Здравствуйте, Александр. А подскажите пожалуйста, чем в языке perl можно заменить знак решетки?
                                                                        Perl воспринимает диез, как комментарий, поэтому часть кода просто не обрабатывается.
                                                                        1. Александр Мальцев 27 апреля 2016, 12:07 # 0
                                                                          А зачем его обрабатывать с помощью perl, пусть это делает браузер :)
                                                                          Если его необходимо вывести, то используйте print.
                                                                        2. Руслан 16 мая 2016, 08:24 # 0
                                                                          Здравствуйте Александр! Помогите пожалуйста разобраться с css для owl carousel 2 owl-dots.
                                                                          По задумке маркер (индикатор) списка по hoveru и aktiv больше по размерам начального маркера, у всех состояний есть border и backgraund.
                                                                          Проблема в том, что маркер большего размера не увеличивается из центра меньшего, а так же начинается с заданного значения bottom. Картинка (http://itchief.ru/assets/uploadify/5/1/d/51dfa142a8350275440206f4ee841295.jpg). Второй день голову ломаю, как сделать, что бы больший маркер центрировался относительного своего меньшего состояния, а так же что бы по hoveru не происходило смещения маркеров относительно друг друга. Вот мой код css
                                                                          .owl-carousel .owl-dots {
                                                                              display: inline-block;
                                                                              position: absolute;
                                                                              bottom: 5%;
                                                                              width: 100%;
                                                                              text-align: center;
                                                                          }
                                                                          .owl-carousel .owl-dot {
                                                                              display: inline-block;
                                                                              width: 15px;
                                                                              height: 15px;
                                                                              margin: 0 5px;
                                                                              border: 3px solid #fff;
                                                                              border-radius: 10%;
                                                                              background: rgba( 0, 0, 0, 0.25 );
                                                                          }
                                                                          .owl-carousel .owl-dot:hover {
                                                                              width: 20px;
                                                                              height: 20px;
                                                                          }
                                                                          .owl-carousel .owl-dot.active {
                                                                              width: 20px;
                                                                              height: 20px;
                                                                              cursor: default;
                                                                              background: rgba( 0, 0, 0, 0.60 );
                                                                          }
                                                                          1. Александр Мальцев 16 мая 2016, 13:45 # 0
                                                                            Здравствуйте, попробуйте добавить в соответствующие разделы следующее:
                                                                            .owl-carousel .owl-dots {
                                                                              vertical-align: middle;
                                                                            }
                                                                            .owl-carousel .owl-dot {
                                                                              vertical-align: middle;
                                                                            }
                                                                            .owl-carousel .owl-dot:hover {
                                                                              margin: 0 2.5px;
                                                                              vertical-align: middle;
                                                                            }
                                                                            .owl-carousel .owl-dot.active {
                                                                              margin: 0 2.5px;
                                                                              vertical-align: middle;
                                                                            }
                                                                            
                                                                            1. Руслан 16 мая 2016, 14:18 # 0
                                                                              Спасибо Вам большое! Все работает! Как можно поддержать Вас финансово?
                                                                              1. Александр Мальцев 16 мая 2016, 14:54 # 0
                                                                                Это можно сделать на странице: itchief.ru/help-site.
                                                                          2. Александр 21 мая 2016, 12:24 # 0
                                                                            Здравствуйте! Как сделать на bootstrap слайдер Карусель, чтобы он отображался на шапке поверх картинки? Чтобы была адаптивность под любые разрешения и устройства. Чтобы ничего не съезжало при изменении разрешения. Пример сайта avatar.kz. Заранее спасибо за ответ.
                                                                            1. Сергей 14 июня 2016, 19:04 # 0
                                                                              Здравствуйте, изучаю данную карусель, но не пойму зачем в первом примере через файл css задаётся параметр H2:
                                                                              h2{
                                                                                  margin: 0;     
                                                                                  color: #666;
                                                                                  padding-top: 90px;
                                                                                  font-size: 52px;
                                                                                  font-family: "trebuchet ms", sans-serif;    
                                                                              }
                                                                              Я не сильно знаком с CSS, но примерно понимаю, что изменение форматирования заголовка H2 станет правилом для всей страницы и сломается шаблон темы.
                                                                              Как сделать, чтобы избежать этот конфликт с другими глобальными H2 заголовками?
                                                                              1. Александр Мальцев 15 июня 2016, 13:10 # 0
                                                                                Это в качестве примера.
                                                                                На реальной странице вышеприведённому примеру можно указать CSS следующим образом:
                                                                                #myCarousel h2 {...}
                                                                                #myCarousel .item {...}
                                                                                
                                                                                Т.е. чтобы стили применились только к элементам, находящихся в блоке с id=«myCarousel».
                                                                                1. Сергей 15 июня 2016, 14:01 # 0
                                                                                  Я уже прописал в STYLE:
                                                                                  .item h2{...}
                                                                                  .item p{...}
                                                                                  Получилось как надо. Теперь пытаюсь разобраться с формой обратной связи feedback, так как пример предоставлен в виде отдельной страницы, а мне желательно вывести поля для обратной связи в модальном окне.
                                                                              2. Константин 17 июня 2016, 12:18 # 0
                                                                                Здравствуйте. А нет-ли идей, как сделать так, чтобы слайдер не зависел от размеров используемых изображений и был равен высоте самого высокого слайда? Потому что, если использовать различные изображения, высота слайдера скачет в момент переключения слайдов. С уважением.
                                                                                1. Александр Мальцев 19 июня 2016, 11:19 # 0
                                                                                  Если Вы не знаете заранее какие будут изображения, то это можно сделать только с помощью JavaScript.
                                                                                  Например так:
                                                                                  <!-- Карусель -->
                                                                                  <div id="carousel" class="carousel slide" data-ride="carousel">
                                                                                  ...
                                                                                  </div>
                                                                                  <!-- Скрипт -->
                                                                                  <script>
                                                                                  $(function(){
                                                                                    var arrHeightImgCarousel = [];
                                                                                    var maxHeight;
                                                                                    var imgCarousel = $('#carousel .item img');
                                                                                    for (var i=0; i<imgCarousel.length; i++) {
                                                                                      arrHeightImgCarousel.push(parseFloat(imgCarousel[i].height));
                                                                                    }
                                                                                    maxHeight = Math.max.apply(null,arrHeightImgCarousel);
                                                                                    $('#carousel').css('height',maxHeight);
                                                                                  });
                                                                                  </script>
                                                                                  
                                                                                  Но я бы так не делал. Лучше бы изображения подогнать под необходимые размеры. Например, изменить им всем высоту с помощью JavaScript на наименьшую. Также вычислить после изменения высоты ширину, и установить минимальную из них карусели. После этого скрыть ненужное с помощью свойства CSS oveflow со значением hidden. Кроме этого, выравнить карусель по центру контейнера.
                                                                                2. Maksim 12 июля 2016, 13:29 # 0
                                                                                  Александр, здравствуйте.

                                                                                  Есть простая карусель
                                                                                  <div id="myCarousel" class="carousel slide">
                                                                                  	<div class="carousel-inner">
                                                                                  		<div class="item active">
                                                                                  		</div>
                                                                                  		<div class="item">
                                                                                  		</div>                                             
                                                                                  	</div>
                                                                                   </div>  
                                                                                  
                                                                                  <script>
                                                                                    var timer = setTimeout(function() {
                                                                                        setTimeout(function(){
                                                                                          $('#myCarousel').carousel('next');    
                                                                                      },5000);
                                                                                        setTimeout(function(){
                                                                                          $('#myCarousel').carousel('prev');    
                                                                                      },10000);
                                                                                        timer = setTimeout(arguments.callee, 10000)
                                                                                    }, 0)
                                                                                  </script>
                                                                                  
                                                                                  
                                                                                  я попытался с помощью скрипта двигать слайды туда-обратно в автоматическом режиме, через промежуток времени. В принципе скрипт работает, но интервалы времени указать очень проблематично, подбором, но это большой костыль. Подскажите, есть ли более изящный вариант автоматического управления каруселью?
                                                                                  1. Александр Мальцев 16 июля 2016, 12:16 # 0
                                                                                    Не совсем понятно, что Вы хотите сделать?
                                                                                    1. Maksim 18 июля 2016, 05:20 # 0
                                                                                      Добрый день.
                                                                                      я хочу сделать автоматическую смену слайдов «туда-обратно» (слайдов всего 2), через заданный промежуток времени.
                                                                                      1. Александр Мальцев 18 июля 2016, 11:52 # 0
                                                                                        Используй такой скрипт:
                                                                                        <script>
                                                                                        $(function(){
                                                                                          var count=0;
                                                                                          setInterval(function(){
                                                                                            count++;
                                                                                            if(count % 2 == 1) {
                                                                                              $('#myCarousel').carousel('next');
                                                                                            } else {
                                                                                              $('#myCarousel').carousel('prev');
                                                                                            }
                                                                                          },5000);
                                                                                        });
                                                                                        </script>
                                                                                        
                                                                                        Что он делает? После загрузки страницы инициализирует переменную count значением, равным 0. После этого он запускает таймер, который будет выполнять код анонимной функции каждые 5000мс. Функция будет делать следующее: увеличивать значение переменной count на 1, проверять чётное ли число count или нет. В зависимости от результата осуществлять смену слайда влево или вправо.
                                                                                        Кроме этого необходимо отменить автоматическую смену слайдов установив карусели data-interval=«false»:
                                                                                        <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
                                                                                          ...
                                                                                        </div>
                                                                                        
                                                                                        1. Maksim 18 июля 2016, 12:29 # 0
                                                                                          Спасибо!
                                                                                  2. Dmitry 14 июля 2016, 17:03 # 0
                                                                                    Приветствую, а как поменять эффект слайдера при перелистывании, к примеру как тут market.bxready.ru/
                                                                                    1. Александр Мальцев 16 июля 2016, 12:14 # 0
                                                                                      Карусель с эффектом fade.
                                                                                      CSS код
                                                                                      .carousel-fade .carousel-inner .item {
                                                                                        opacity: 0;
                                                                                        -webkit-transition-property: opacity;
                                                                                        -moz-transition-property: opacity;
                                                                                        -o-transition-property: opacity;
                                                                                        transition-property: opacity;
                                                                                      }
                                                                                      .carousel-fade .carousel-inner .active {
                                                                                        opacity: 1;
                                                                                      }
                                                                                      .carousel-fade .carousel-inner .active.left,
                                                                                      .carousel-fade .carousel-inner .active.right {
                                                                                        left: 0;
                                                                                        opacity: 0;
                                                                                        z-index: 1;
                                                                                      }
                                                                                      .carousel-fade .carousel-inner .next.left,
                                                                                      .carousel-fade .carousel-inner .prev.right {
                                                                                        opacity: 1;
                                                                                      }
                                                                                      .carousel-fade .carousel-control {
                                                                                        z-index: 2;
                                                                                      }
                                                                                      @media all and (transform-3d), (-webkit-transform-3d) {
                                                                                        .carousel-fade .carousel-inner > .item.next,
                                                                                        .carousel-fade .carousel-inner > .item.active.right {
                                                                                          opacity: 0;
                                                                                          -webkit-transform: translate3d(0, 0, 0);
                                                                                          transform: translate3d(0, 0, 0);
                                                                                        }
                                                                                        .carousel-fade .carousel-inner > .item.prev,
                                                                                        .carousel-fade .carousel-inner > .item.active.left {
                                                                                          opacity: 0;
                                                                                          -webkit-transform: translate3d(0, 0, 0);
                                                                                          transform: translate3d(0, 0, 0);
                                                                                        }
                                                                                        .carousel-fade .carousel-inner > .item.next.left,
                                                                                        .carousel-fade .carousel-inner > .item.prev.right,
                                                                                        .carousel-fade .carousel-inner > .item.active {
                                                                                          opacity: 1;
                                                                                          -webkit-transform: translate3d(0, 0, 0);
                                                                                          transform: translate3d(0, 0, 0);
                                                                                        }
                                                                                      }
                                                                                      

                                                                                      В HTML-коде к карусели необходимо добавить класс carousel-fade.
                                                                                      HTML-код
                                                                                      <div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
                                                                                        ...
                                                                                      </div>
                                                                                      
                                                                                      1. Dmitry 16 июля 2016, 19:58 # 0
                                                                                        Крутяк, спасибо сэр!
                                                                                        1. Дина 03 августа 2016, 08:24 # 0
                                                                                          Ищу код, чтобы слайды карусели менялись с эффектом fade, но чтобы после смены слайд держался сенкунд 5-7 (на нем текст), а потом опять плавно менялся на другой. Вот здесь можно посмотреть. У меня немного другой код, чем вы предложили, мне там проще найти где время менять. Но проблема в том, что слайд не задерживается в четком состоянии при увеличении промежутка времени, а тут же начинает исчезать и прочитать текст все равно невозможно.
                                                                                          Вот HTML:
                                                                                          <div id="myCarousel" class="carousel fade slide hiddenmd" data-ride="carousel" data-interval="7000">
                                                                                          а вот CSS:
                                                                                          .carousel.fade{opacity:1;margin:25px 0 20px 0;}
                                                                                          .carousel.fade .item{
                                                                                          -moz-transition:opacity 6s ease 2s;
                                                                                          -o-transition:opacity 6s ease 2s;
                                                                                          -webkit-transition:opacity 6s ease 2s;
                                                                                          transition:opacity 6s ease 2s;left:0!important;
                                                                                          opacity:0;top:0;position:absolute;width:100%;display:block !important;
                                                                                          }
                                                                                          .carousel.fade .item:first-child{
                                                                                          top:auto;position:relative;
                                                                                          }
                                                                                          .carousel.fade .item.active{
                                                                                          opacity:1;
                                                                                          -moz-transition:opacity 6s ease 1s;
                                                                                          -o-transition:opacity 6s ease 1s;
                                                                                          -webkit-transition:opacity 6s ease 1s;
                                                                                          transition:opacity 6s ease 1s;
                                                                                          }
                                                                                          
                                                                                          Не подскажете, как поменять временной интервал так, чтобы слайд задерживался подольше? Animation-delay тоже не помогает.
                                                                                          Спасибо!
                                                                                          1. Александр Мальцев 03 августа 2016, 13:35 # 0
                                                                                            Попробуйте поиграться с параметрами свойства transition:
                                                                                            transition:opacity 6s ease 1s;
                                                                                            
                                                                                            1 интервал (6 секунд) — время перехода;
                                                                                            2 индервал (1 секнда) — задержка.

                                                                                            Если не получится, то можно попробывать это реализовать через JavaScript, используя событие slide.bs.carousel.
                                                                                            1. Дина 03 августа 2016, 13:43 # 0
                                                                                              Спасибо за ответ, Александр.
                                                                                              Да, я именно эти параметры и меняю, пытаясь найти подходящий. Если меняю задержку, то смена слайдов через 1-2 цикла превращается в полную кашу. Если увеличиваю интервал, то слайл как бы все время полусменившийся — полурастаял-полупоявился следующий. В общем, жуть. В вашем варианте остался класс карусели slide, поэтому на время вообще не повлиять никак.

                                                                                              Скриптов и так уже куча висит, не хотелось бы еще добавлять :-(
                                                                                              1. Александр Мальцев 03 августа 2016, 14:47 # 0
                                                                                                Не знаю зачем реализовывать такой сложный и непонятный функционал. Стили которые Вы провели для слайдера не работают должным образом (если несколько раз подряд нажать на кнопку смена слайда). Слайдер, который Вы хотите создать будет ещё более трудный в понимании. Например, если я зохочу перейти на другой слайд, то мне придётся ещё ждать 5-7 секунд. Обычный пользователь подумает что такой слайдер просто не работает. Кроме этого, Вам придётся ставить стопы ещё на стрелочки.
                                                                                                На мой взгляд лучше изменить время смены слайда на 10 секунд и больше ничего не делать.
                                                                                                data-interval="10000"
                                                                                                
                                                                                                Либо просто отключить автоматическую смену слайдов. Если пользователь заинтересуется, он и так их посмотрит. Тем более если там много текста, то ничего ему не будет мешать прочитать всё до конца и посмотреть что там ещё есть… При необходимости добавить к карусели красивую анимацию (но не 6 секунд).

                                                                                                Надеюсь я переубедил Вас это не делать :)
                                                                                                1. Дина 03 августа 2016, 15:00 # 0
                                                                                                  Конечно, убедили! Не то, чтобы я страстная любительница сложных функционалов — просто я не очень представляю, как это сделать попроще :-)
                                                                                                  Я правильно поняла, что мне нужно только увеличить data-interval=«10000», класс карусели fade и transition ease оставить, а все временные показатели (задержка и интервал) убрать?
                                                                                                  Спасибо!
                                                                                                  1. Дина 03 августа 2016, 15:07 # 0
                                                                                                    ААА заработало!!! :-D Оставила только интервал смены слайда 2 секунды, а задержку убрала. И data-interval=15000. И вуаля! Спасибо еще раз!
                                                                                      2. дмитрий_К 02 августа 2016, 08:45 # 0
                                                                                        Здравствуйте,
                                                                                        никак не пойму как изменить расположение стрелок на слайдере карусельном…
                                                                                        надо, чтоб прижимались к краям фотографии эти стрелки
                                                                                        не подскажете?
                                                                                        1. Александр Мальцев 03 августа 2016, 13:47 # 0
                                                                                          Пример можно посмотреть здесь: jsfiddle.net/itchief/qom060z2/
                                                                                        2. Антон 20 сентября 2016, 02:36 # 0
                                                                                          Доброго времени!
                                                                                          Помогите пожалуйста разобраться со стилями.
                                                                                          Не получается прилепить верх и низ карты к другим блокам шаблона. Пробовал уменьшить class=«padding-page» но вместе с ним съезжают другие блоки.

                                                                                          1. Александр Мальцев 21 сентября 2016, 02:27 # 0
                                                                                            Не знаю как у вас там всё сделано.
                                                                                            Можно например, добавить отрицательные margin отступы для секции с id=«maps».
                                                                                            Например, так:
                                                                                            #maps {
                                                                                              margin-top: -20px; /* вместо 20 укажите необходимое число */ 
                                                                                              margin-bottom: -20px; /* вместо 20 укажите необходимое число */ 
                                                                                            }
                                                                                            
                                                                                          2. Viktor Sharko 30 октября 2016, 06:05 # 0
                                                                                            Шеф, Доброе утро!
                                                                                            А можно ли средствами Бутстрап 3 сделать такую карусель
                                                                                            <img
                                                                                            src=«http://itchief.ru/assets/uploadify/f/e/c/fec286dd23badfa725140519fddd93e1s.jpg» class=«fancybox thumbnail center»>
                                                                                            ?

                                                                                            Если не Бутстрапом так чем можно?
                                                                                            1. Александр Мальцев 30 октября 2016, 12:10 # 0
                                                                                              Здравствуйте. Это можно выполнить с помощью owl carousel. Плагин jQuery специально предназначенный для выполнения таких вещей.
                                                                                              1. Viktor Sharko 30 октября 2016, 17:37 # 0
                                                                                                Спасибо большое действительно очень хороший и отзывчивый плагин. Сам демо сайт которого сделан на Бутстрапе.
                                                                                            2. Александр 17 января 2017, 05:21 # 0
                                                                                              Здравствуйте. Помогите разобраться, не могу я понять. Вот карусель. Как мне сделать, что бы картинки и текст, слайдер брал из нужных мне категорий, что и где нужно прописать? Как это должно выглядеть? Заранее благодарен.
                                                                                              <div id="myCarousel" class="carousel slide">
                                                                                                <div class="carousel-inner">
                                                                                                  <div class="item active">
                                                                                                      <img src="" alt="" />
                                                                                                      <div class="carousel-caption">
                                                                                                        <h4></h4>
                                                                                                        <p></p>
                                                                                                      </div>
                                                                                                   </div>
                                                                                                  <div class="item">
                                                                                                      <img src="" alt="" />
                                                                                                      <div class="carousel-caption">
                                                                                                        <h4></h4>
                                                                                                        <p></p>
                                                                                                      </div>
                                                                                                   </div>
                                                                                                  <div class="item">
                                                                                                      <img src="" alt="" />
                                                                                                      <div class="carousel-caption">
                                                                                                        <h4></h4>
                                                                                                        <p></p>
                                                                                                      </div>
                                                                                                   </div>
                                                                                                </div>
                                                                                                <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
                                                                                                <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
                                                                                              </div>
                                                                                              1. Александр Мальцев 19 января 2017, 12:30 # 0
                                                                                                Обычно это делается на сервере следующим образом:
                                                                                                1. Получить нужные данные посредством запроса.
                                                                                                2. Перебрать их в цикле и сформировать необходимо тело карусели.
                                                                                              2. Демьян Золин 17 января 2017, 19:15 # 0
                                                                                                У Вас в первом примере 3 слайда и 3 кружочка, у себя сделал 12 слайдов, как поменять количество кругляков?
                                                                                                1. Демьян Золин 18 января 2017, 10:35 # 0
                                                                                                  РЕШЕНО
                                                                                                  эти кругляки называются
                                                                                                  <!-- Индикаторы для карусели -->
                                                                                                  22 строка в примере
                                                                                                  Один индикатор
                                                                                                  <li data-target="#myCarousel" data-slide-to="1"></li>
                                                                                                2. Jebir 19 января 2017, 02:03 # 0
                                                                                                  Здравствуйте. Помогите разобраться!
                                                                                                  Вообщем не могу сделать поверх каруселя поставить лого и меню как вот тут и еще как сделать чтоб картинки слайда повторялись repeat-x, когда я уменьшаю сайт то картинка в левой стороне! заранее Спасибо!
                                                                                                  1. Александр Мальцев 19 января 2017, 12:47 # 0
                                                                                                    Здравствуйте. Чтобы расположить элементы относительно друг друга необходимо использовать относительное и абсолютное позиционирование. Т.е. необходимо некоторому блоку задать относительное позиционирование, а другим блокам абсолютное. Настроить положение абсолютных блоков по координате z (т.е. который будет располагаться впереди, а какой сзади) можно с помощью CSS свойства z-index.
                                                                                                    Автоматическое масштабирование картинки, установленной в качестве фона, можно осуществить, если блоку задать CSS свойство background-size со значением cover или contain.
                                                                                                    1. MadMax 31 января 2017, 15:07 # 0
                                                                                                      Александр, прошу помощи itchief.ru/lessons/bootstrap-3/bootstrap-3-carousel#comment-3886
                                                                                                  2. Владимир 28 января 2017, 13:43 # 0
                                                                                                    Здравствуйте! Спасибо, что Вы есть!
                                                                                                    Подскажите, а как сделать, чтобы стрелки навигации
                                                                                                    carousel-control
                                                                                                    отображались только при наведении мыши?
                                                                                                    1. Владимир 29 января 2017, 06:38 # 0
                                                                                                      Решил так:
                                                                                                      #myCarousel .carousel-control {
                                                                                                          opacity: 0;
                                                                                                          filter: alpha(opacity=0);
                                                                                                      }
                                                                                                      #myCarousel:hover .carousel-control {
                                                                                                          opacity: 1;
                                                                                                          filter: alpha(opacity=100);
                                                                                                      }
                                                                                                      1. Александр Мальцев 31 января 2017, 16:08 # 0
                                                                                                        Можно добавить ещё плавности с помощью transition:
                                                                                                        #myCarousel .carousel-control {
                                                                                                          opacity: 0;
                                                                                                          filter: alpha(opacity=0);
                                                                                                          transition:.5s;
                                                                                                        }
                                                                                                        
                                                                                                    2. MadMax 31 января 2017, 14:58 # 0
                                                                                                      Добрый день.
                                                                                                      Прошу помощи, перерыл весь инет, но так ответа и не нашел.
                                                                                                      Ковыряю BS4 и возникла проблема со слайдером (каруселью) — приблуда совершенно не хочет адаптивиться/респонситься ни в одном браузере, кроме как в Мозиле! В остальных все изображения просто сжимаются по ширине, а в Мозиле все отлично — слайдер «схлопывается» пропорционально как по высоте так и по ширине.
                                                                                                      <!DOCTYPE html>
                                                                                                      <html lang="en">
                                                                                                        <head>
                                                                                                          <meta charset="utf-8">
                                                                                                          <meta http-equiv="X-UA-Compatible" content="IE=edge">
                                                                                                          <meta name="viewport" content="width=device-width, initial-scale=1">
                                                                                                          <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
                                                                                                          <title>Bootstrap 101 Template</title>
                                                                                                      
                                                                                                          <!-- Bootstrap -->
                                                                                                          <link href="css/bootstrap.min.css" rel="stylesheet">
                                                                                                          <!-- <link href="css/main.css" rel="stylesheet"> -->
                                                                                                      
                                                                                                          <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
                                                                                                          <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
                                                                                                          <!--[if lt IE 9]>
                                                                                                            <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
                                                                                                            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
                                                                                                          <![endif]-->
                                                                                                        </head>
                                                                                                        <body>
                                                                                                          <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                                                                                                             <div class="carousel-inner" role="listbox">
                                                                                                                <div class="carousel-item active">
                                                                                                                    <img class="d-block img-fluid" src="img/carousel_1.jpg" alt="First slide">
                                                                                                                </div>
                                                                                                                <div class="carousel-item">
                                                                                                                   <img class="d-block img-fluid" src="img/carousel_2.jpg" alt="Second slide">
                                                                                                               </div>
                                                                                                               <div class="carousel-item">
                                                                                                                   <img class="d-block img-fluid" src="img/carousel_3.jpg" alt="Third slide">
                                                                                                               </div>
                                                                                                           </div>
                                                                                                           <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                                                                                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                                                                            <span class="sr-only">Previous</span>
                                                                                                        </a>
                                                                                                        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                                                                                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                                                                            <span class="sr-only">Next</span>
                                                                                                        </a>
                                                                                                      </div>
                                                                                                          
                                                                                                      
                                                                                                          
                                                                                                      
                                                                                                          <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
                                                                                                          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
                                                                                                          <!-- Include all compiled plugins (below), or include individual files as needed -->
                                                                                                          <script src="js/jquery-3.1.1.min.js"></script>
                                                                                                          <script src="js/bootstrap.min.js"></script>
                                                                                                        </body>
                                                                                                      </html>
                                                                                                      
                                                                                                      CSS и JS из пакета BS4.
                                                                                                      Помогите, не знаю больше куда смотреть!
                                                                                                      1. Александр Мальцев 31 января 2017, 15:56 # 0
                                                                                                        Здравствуйте. Не знаю, скорее всего связано с переводом Bootstrap 4 альфа 6 на Flexbox. Она находится в стадии альфы, поэтому, не только карусель, а много чего работать не будет. Если вам необходимо «рабочая лошадка», то используйте Bootstrap 3.3.7. В противном случае придётся ждать стабильного релиза…
                                                                                                        1. MadMax 31 января 2017, 16:19 # 0
                                                                                                          Я бы с радостью его использовал, но после прелести использования flex-box возвращаться к сетке на флотах — это боль…
                                                                                                          1. MadMax 01 февраля 2017, 08:32 # 0
                                                                                                            В общем сделал по-другому: скомпилил BS3 без сетки, взял сетку от BS4 (bootstrap-grid.min.css) и подключил ее перед основным файлом CSS BS3 — все заработало! В итоге имею сетку от BS4 на FLEXBOX и стабильную работу BS3!
                                                                                                            1. Александр Мальцев 02 февраля 2017, 16:35 # +1
                                                                                                              Интересное решение получилось )
                                                                                                        2. Салам 05 февраля 2017, 21:15 # 0
                                                                                                          Друзья подскажите пожалуйста как в js сделать автоматическое добавление индикатора для слайдера
                                                                                                          заранее спасибо
                                                                                                          1. Александр Мальцев 07 февраля 2017, 17:41 # 0
                                                                                                            Можно сделать следующим образом (количество индикаторов будет равно количеству слайдов, а номер активного индикатора будет назначен в зависимости от позиции активного слайда):
                                                                                                            <script>
                                                                                                            $(function(){
                                                                                                              // myCarousel - id карусели
                                                                                                              var items = $('#myCarousel .carousel-inner>.item');
                                                                                                              var indicators = '';
                                                                                                              for (var i=0; i < items.length; i++) {
                                                                                                                if (items.eq(i).hasClass('active')) {
                                                                                                                  indicators += '<li data-target="#myCarousel" data-slide-to="'+i+'" class="active"></li>';
                                                                                                                } else {
                                                                                                                  indicators += '<li data-target="#myCarousel" data-slide-to="'+i+'"></li>';
                                                                                                                }
                                                                                                              }
                                                                                                              $('#myCarousel .carousel-indicators').html(indicators);
                                                                                                            });
                                                                                                            </script>
                                                                                                            
                                                                                                            1. Салам 11 февраля 2017, 20:36 # 0
                                                                                                              Не работают индикаторы.
                                                                                                              1. Александр Мальцев 13 февраля 2017, 14:02 # 0
                                                                                                                Если код не работает, то проверьте следующее:
                                                                                                                1. Скрипт добавлен после подключения bootstrap.min.js
                                                                                                                2. На странице есть карусель с id, равным myCarousel
                                                                                                                3. У карусели есть элементы (слайды)

                                                                                                                Также можно проверить, нет ли ошибок в консоли браузера (Ctrl+Shift+I).

                                                                                                          Вы должны авторизоваться, чтобы оставлять комментарии.