Плагин Carousel в Bootstrap

[Aslan]

Плагин Карусель - это компонент для циклического перемещения элементов, например, карусели (слайд-шоу)
Плагины могут быть включены отдельно (с использованием отдельного файла «carousel.js» Bootstrap) или все сразу (используя «bootstrap.js» или «bootstrap.min.js»).
Как создать карусель
В следующем примере показано, как создать базовую карусель:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <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>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Разъяснения
Самый внешний <div>:
Карусели требуют использования идентификатора (в данном случае id="myCarousel") для правильной работы карусели.
class="carousel" Указывает , что это <div>содержит карусель.
.slide Класс добавляет переходный CSS и эффект анимации, что делает элементы скольжения при показе нового элемента. Опустите этот класс, если вы не хотите этого эффекта.
data-ride="carousel" Атрибут указывает Bootstrap начать немедленно при анимации карусель загрузки страницы.
Часть «Индикаторы»:
Индикаторы - это маленькие точки в нижней части каждого слайда (что указывает, сколько слайдов есть в карусели в настоящее время).
Индикаторы указаны в упорядоченном списке с классом .carousel-indicators.
data-targetАтрибут указывает на идентификатор карусели.
data-slide-toАтрибут определяет , какой слайд будет, при нажатии по конкретной точке.
Часть «Обтекатель для слайдов»:
Слайды указаны <div>с классом .carousel-inner.
Содержимое каждого слайда определяется в <div>классе.item. Это может быть текст или изображения.
.activeКласс должен быть добавлен к одному из слайдов. В противном случае карусель не будет видна.
Элемент «Левый и правый элементы управления»:
Этот код добавляет кнопки «влево» и «вправо», что позволяет пользователю перемещаться вперед и назад между слайдами вручную.
data-slideАтрибут принимает ключевые слова "prev"или "next", который изменяет положение скольжения относительно его текущего положения.

Добавить текст в слайды
Добавьте <div class="carousel-caption">в каждый, <div class="item">чтобы создать подпись для каждого слайда:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <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>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="la.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Los Angeles</h3>
        <p>LA is always so much fun!</p>
      </div>
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
      <div class="carousel-caption">
        <h3>Chicago</h3>
        <p>Thank you, Chicago!</p>
      </div>
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
      <div class="carousel-caption">
        <h3>New York</h3>
        <p>We love the Big Apple!</p>
      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Классы каруселей

Классы Описание
.carousel Создает карусель
.slide Добавляет эффект перехода CSS и анимации при перемещении от одного элемента к другому. Удалите этот класс, если вы не хотите этого эффекта.
.carousel-indicators Добавляет индикаторы для карусели. Это маленькие точки в нижней части каждого слайда (что указывает, сколько слайдов есть в карусели и которые скользят, когда пользователь просматривает)
.carousel-inner Добавляет слайды в карусель
.icon-next Значок Юникода (стрелка в право), используемая в каруселях. Это часто используется вместо глификона
.icon-prev Значок Юникода (стрелка в лево), используемая в каруселях. Это часто используется вместо глификона
.item Задает содержание каждого слайда
.left carousel-control Добавляет левую кнопку в карусель, что позволяет пользователю вернуться между слайдами
.right carousel-control Добавляет правую кнопку к карусели, которая позволяет пользователю продвигаться вперед между слайдами
.carousel-caption Определяет подпись для карусели

Через data- * Атрибуты
data-ride="carousel"Атрибут активирует карусель.
data-slideИ data-slide-to
data-slideАтрибут принимает два значения: предыдущие или следующее , в то время как data-slide-toпринимает номера.

<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">

<!-- Carousel Indicators -->
<li data-target="#myCarousel" data-slide-to="1"></li>

<!-- Carousel Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">

Через jаvascript
Включить вручную:

// Activate Carousel
$("#myCarousel").carousel();

// Enable Carousel Indicators
$(".item").click(function(){
    $("#myCarousel").carousel(1);
});

// Enable Carousel Controls
$(".left").click(function(){
    $("#myCarousel").carousel("prev");
});

Варианты карусели
Параметры могут передаваться через атрибуты данных или jаvascript. Для атрибутов данных добавьте имя параметра в data-, как в data-interval = "".
Имя Тип Default Описание
interval число или логическое значение false
5000 Задает задержку (в миллисекундах) между каждым слайдом.

Примечание. Установите интервал в значение false, чтобы остановить автоматическое перемещение элементов
pause строка или логическое значение false
"hover" Пауза карусели переходит через следующий слайд, когда указатель мыши входит в карусель, и возобновляет скользящее движение, когда указатель мыши покидает карусель

Примечание. Установите паузу в значение false, чтобы остановить возможность паузы при наведении
wrap логический
true Указывает, должна ли карусель проходить через все слайды непрерывно или останавливаться на последнем слайде

true - цикл непрерывно
false - остановка в последнем пункте

Карусельные методы
В следующей таблице перечислены все доступные методы карусели.
Метод Описание
.carousel(options) Активирует карусель с опцией. См. Приведенные выше значения для действительных значений.
.carousel("cycle") Проходит через элементы карусели слева направо
.carousel("pause") Остановка карусели от прохождения предметов
.carousel(number) Переход к указанному элементу (нуль: первый элемент равен 0, второй элемент равен 1 и т. Д.)
.carousel("prev") Переход к предыдущему элементу
.carousel("next") Переход к следующему элементу

События карусели
В следующей таблице перечислены все доступные события карусели.
Event Описание
slide.bs.carousel Происходит, когда карусель собирается сдвинуться с одного предмета на другой
slid.bs.carousel Происходит при завершении карусели с одного предмета на другой

Другие примеры
Подписи к слайдам
Добавьте <div class="carousel-caption">в них каждый, <div class="item">чтобы создать подпись для каждого слайда:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <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>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beautiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beautiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <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>

Урок подготовлен сайтом: Theme-Free - Создать сайта в 2 клика самому легко!