Плагин Carousel в Bootstrap

Плагин Карусель - это компонент для циклического перемещения элементов, например, карусели (слайд-шоу)

Плагины могут быть включены отдельно (с использованием отдельного файла «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.tk

Исправить недочеты в статье

Для того что бы исправить текст новости, просто выделите нужное место и нажмите ctrl + enter

Материал добавил

7FV

Связь со мной
Телеграм: aslan7f
Скайп: не указан
Добавил статей 26
Группа
Web Дизайнер
Немного обо мне
Всем привет ребят!
Предлагаю услуги по верстке сайтов, доработке уже существующих шаблонов, написание шаблонов с нуля.

Конечно же у вас возникает сразу вопрос, кто я, где мое портфолио и т.д.
Отвечу на этот вопрос:
Кто же я такой? - Я обычный растаман, который накурившись верстает сайты уже лет так 9, рисует иконки, визитки, банеры, логотипы, ретуширует фотографии.

Зарабатываю я на этом? - Скорей нет чем да. Это мое хобби, мне просто нравится все что связано с веб дизайном. Я не говорю что бесплатно все делаю,хотя порой если мне нравится проект и сам клиент как человек, тогда я могу бесплатно поддерживать, помогать с его проектом.

Добавить комментарий


@