Twitter Bootstrap 3 является одним из лучших CSS фреймворков для разработки и проектирования дизайна для систем управления контентом. С помощью Bootstrap 3 вы с лёгкостью создавать макеты страниц используя систему сеток. В основе многих CMS присутствует базовый компонент слайдера контента, обычно это последовательное отображения изображений, но так же это может быть последние завершённые проекты, описание специальных предложений, ссылки на новости или последние статьи вашего блога.
В этой статье мы разморим как создать слайдер контента с помощью Twitter Bootstrap 3 Carousel.
Введение в компонент Twitter Bootstrap 3 Carousel
Компоновка для компонента Carousel выглядит следующим образом:
...
...
Из кода выше, мы можем видеть, Twitter Bootstrap 3 Carousel делится на несколько частей:
• Индикаторы• Слайдер контента
• Управление
Чтобы установить div элемент в качестве слайдера, мы добавляем следующие имена классов: carousel и slide. Класс carousel создает эффект “карусели”, т. е. смена слайда по кругу.
Класс slide добавляет раздвижные анимации с правой или левой стороны. Индикаторы – это небольшие круги в центре внизу слайдера, они определяют текущее положение слайда и количество слайдов.
Показатели определяются с упорядоченным списком.
Упорядоченный список имеет класс carousel-indicators, что делает дочерние элементы в виде небольших кружков.
Каждый элемент Li должен иметь атрибут data-target с id родительского контейнера.
Он также должен иметь атрибут data-slide-to с уникальным целочисленным значением для увеличения позиции и значение должно начинаться с «0». Содержание слайдов является неотъемлемой частью слайдера. В этом пространстве мы поставим наши контент для слайдера.
Слайдер Контента определяется через класс carousel-inner.
Этот элемент div может иметь неограниченное количество вложенных див.
Первый элемент должен быть активным по умолчанию, так что добавьте в класс active.
...
...
Каждый элемент класса item имеет два подраздела: image а carousel-caption. Изображение используется в качестве фона для слайда.
Элемент с carousel-caption находится выше изображения, и используется как заголовок для слайда.
Внутри carousel-caption мы можем поставить теги возможности и элемент, или даже оба.
Управление стрелки вправо и влево используются для изменения слайдов вручную.
Там должны быть два элемента: один для каждого направления.
Первым элементом будет элемент span с классами glyphicon glyphicon-chevron-left, которые являются значок со стрелкой влево, и второй элемент будет иметь классы glyphicon glyphicon-chevron-right, который добовляет стрелку вправо. В Twitter Bootstrap, для того чтобы отображать значки, мы можем использовать шрифты вместо изображений. Вы успешно создали слайдер для вашего сайта.
При этом вы не написали не единой строки кода JavaScript, bootstrap.js сделали все за вас.
Карусель варианты
Дополнительная регулировка ползунка вы можете добавить множественные атрибуты Data-* для родительского контейнера карусели.
• ‘data-interval’ — используется для указания интервала времени между слайдами. Он принимает цифровое значение, и число должно быть в миллисекундах.
• ‘data-pause’ — используется, чтобы определить, когда событие паузы будет вызван. Например, когда это значение равно “hover” , то слайдер будет останавливается, когда мышь находится на слайдере.
• ‘data-wrap’ — это логический атрибут, и позволяет установить, нужно ли заново начать слайдер.
Настройка с помощью jQuery
Если вы хотели бы использовать jQuery и атрибуты Data -*, Twitter Bootstrap позволяет инициализировать через JavaScript.
Сделать div слайдер, вы можете написав следующий код:
$('.carousel').carousel();
Варианты для слайдера могут быть установлены с помощью параметров.
Например:
$('.carousel').carousel({
interval: 2000,
pause: 'hover',
wrap: true
});
Вы также можете вручную вызвать события слайдера, используя следующий код:
• .carousel(‘pause’) // пауза
• .carousel(‘cycle’) // включить слайды
• .carousel(3) // дисплей четвертый слайд в слайдере
• .carousel(‘prev’ ) // показать предыдущий слайд
• .carousel(‘next’) // показать следующий слайд в слайдере