Создаем слайдер с помощью Bootstrap

В основе многих систем CMS, мы, как правило, имеем такой базовый компонент как "Slider" (Карусель), в основном - это автоматически-последовательное отображение изображений, но также он может отображать последние завершенные проекты, отзывы ваших клиентов, описание специальных предложений, ссылки на новости или последние статьи из блога. В этой статье мы рассмотрим, как создать слайдер с помощью компонента Carousel в Twitter Bootstrap 3.

Введение в компонент Carousel Twitter Bootstrap 3

Разметка для компонента карусели выглядит так:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Указатели -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <!-- Контент слайда (slider wrap)-->
    <div class="carousel-inner">
        <div class="item active">
            <img src="..." alt="...">
            <div class="carousel-caption">
                ...
            </div>
        </div>
        ...
    </div>
    <!-- Элементы управления -->
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

Из приведенного выше кода, мы видим, что слайдер Bootstrap 3 делится на несколько частей:

• Указатели
• Содержание слайдера
• Элементы управления

Чтобы переобразовать элемент div в слайдер, мы добавляем имена классов: carousel и slide. Класс carousel создает эффект «карусели», то есть изменяет слайды по кругу. Класс slide добавляет скользящую анимацию из правой или левой стороны. Указатели - это маленькие круги в нижней части слайдера, они определяют текущее положение слайда и количество слайдов. Указатели создаются с помощью упорядоченного списка.

<ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

Упорядоченный список имеет класс carousel-indicators, который преобразует дочерние элементы в виде небольших кругов. Каждый элемент li должен иметь атрибут data-target с идентификатором родительского контейнера. Он также должен иметь атрибут data-slide-to с уникальным цифровым значением, чтобы ссылаться на конкретный слайд, значения должны начинаться с "0".

Содержание слайда - это важнейшая часть слайдера, именно здесь мы разместим наше содержание для слайдера. Содержание определяется с помощью класса carousel-inner. Этот элемент div может иметь неограниченное количество вложенных div-ов. Первый элемент должен быть активным по умолчанию, так что добавьте класс active.

<div class="carousel-inner">
    <div class="item active">
        <img src="..." alt="...">
        <div class="carousel-caption">
            ...
        </div>
    </div>
    ...
</div>

Каждый элемент с классом item имеет два подраздела: image и carousel-caption. Изображение используется в качестве фона для слайда. Элемент с классом carousel-caption расположен над изображением, и используется в качестве заголовка слайда. Внутри carousel-caption, мы можем добавить <h3> </h3> или <P> </P> теги, или даже оба.

Управление осуществляется стрелками влево и вправо, они используются для изменения слайдов вручную.

<!-- Элементы управления -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
</a>

Там должно быть два элемента: по одному для каждого направления. Первый элемент будет иметь span элемент с классами glyphicon glyphicon-chevron-left, который является значком со стрелкой влево, а второй элемент будет иметь классы glyphicon glyphicon-chevron-right, это стрелка вправо. В Bootstrap, чтобы отобразить иконки, мы можем использовать шрифты вместо изображений.

Вот и всё! Вы успешно создали слайдер для вашего сайта. Кроме того, вы не написали ни строчки кода JavaScript, но bootstrap.js сделал все за вас.

Настройки Carousel

Для дополнительной настройки слайдера можно добавить несколько атрибутов data-* для родительского контейнера карусели.

• "data-interval" используется для указания интервала времени между переключением слайдов. Он принимает числовое значение, и число должно быть в миллисекундах.
• "data-pause" используется для определения момента, когда событие "пауза" будет вызвано. Например, когда оно равно "hover", переключение слайдов останавливается, когда мышь находится над слайдером.
• "data-wrap" является булевым атрибутом и позволяет установить, следует ли возобновить переключение слайдов, если конец списка слайдов будет достигнут.

Настройка с jQuery

Если вы хотели бы использовать jQuery и data-* атрибуты, Bootstrap позволяет инициализацию с помощью JavaScript. Для этого вы можете написать следующий код:

$('.carousel').carousel();

Настройки карусели могут быть установлены с помощью параметров. Например:

$('.carousel').carousel({
    interval: 2000,
    pause: 'hover',
    wrap: true
});

Вы также можете вызвать вручную события слайдера, используя следующий код:

.carousel("pause") // пауза
.carousel("cycle") // включить слайды
.carousel(3) // показать четвертый слайд
.carousel("prev") // показать предыдущий слайд
.carousel("next") // показать следующий слайд

Приведенные выше методы могут быть вызваны из любого кода JavaScript, чтобы управлять обычной работой слайдера. Я считаю, что prev и next методы очень полезны если я хочу показать мои собственные кнопки вместо стандартных стрелок. Особенно, когда они находятся за пределами макета карусели.

Пример слайдера

Заключение

Эта статья должна быть полезной для тех, кто хочет узнать как создать слайдер без написания тысячи строк кода в JavaScript. Без сомнения, это позволит увеличить скорость разработки. Самое главное, что это решение кроссбраузерно, так что вам не придется рвать на себе волосы, чтобы заставить его работать в старых браузерах.