Twitter Bootstrap 3 является одним из лучших CSS-фреймворков для разработки и проектирования систем управления контентом. С помощью макетов сетки Twitter Bootstrap легко создавать блоги, портфолио и профили. Одной из общих черт многих типов CMS является «Slider». Последовательное автоматическое отображение изображений, слайдер может быть любым: демонстрация ваших последних проектов, демонстрация активов вашего клиента, описание специальных предложений, ссылки на новостные статьи или выделение ваших последних сообщений в блоге.
В этой статье мы узнаем, как создать слайдер JavaScript с помощью компонента Карусель Twitter Bootstrap 3.
Понимание Twitter Bootstrap 3 Карусель Компонент
Разметка для компонента Карусель выглядит следующим образом:
<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="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 Content (Wrapper for slides )-->
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<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 разделена на три основных раздела:
- индикаторы
- Содержание слайдера
- управления
Посмотрите живую демонстрацию слайдера, созданного с использованием структуры Bootstrap 3 по умолчанию.
Чтобы установить любой div в качестве слайдера, мы должны применить классы carouselslide Класс 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 Каждый элемент lidata-target Они также должны иметь уникальный атрибут data-slide-to
Содержание слайдера является основной частью слайдера. Именно в этом пространстве мы разместим контент нашего слайдера. Область содержимого слайдера определяется с использованием класса carousel-inner Этот div может иметь неограниченное количество div item Для первого item
<div class="carousel-inner">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
Каждый itemimagecarousel-caption Изображение используется как полноэкранное отображение содержимого в слайдере. carousel-caption Вы можете поместить либо элемент <h3></h3><p></p>carousel-caption
Элементами управления являются метки стрелок влево и вправо, которые используются для смены слайдера вручную.
<!-- Controls -->
<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>
Должно быть два элементы: по одному для каждой стрелки. Первый элемент будет иметь диапазон с glyphicon glyphicon-chevron-left элемент будет иметь glyphicon glyphicon-chevron-right Поскольку Bootstrap использует шрифты вместо изображений для отображения значков, мы должны следовать классам глифов для отображения значков.
Это оно! Вы успешно создали слайдер для своего сайта. Кроме того, мы не написали ни одной строки JavaScript, чтобы он работал. bootstrap.js делает все автоматически для вас.
Карусель Варианты
Вы можете дополнительно настроить функции ползунка по умолчанию, добавив еще несколько атрибутов data-*
data-interval Он принимает число в качестве значения, а число представляет собой миллисекунды.
data-pause Если значение «hover», оно перестает скользить, когда мышь находится на слайдере.
data-wrap
Для JQuery Geeks
Что ж, если вам нравится использовать jQuery и атрибуты data-*
Чтобы карусельный div работал как карусель, вы должны написать следующий фрагмент:
$('.carousel').carousel()
Параметры карусели могут быть установлены путем передачи объекта JSON внутри функции карусели.
Например:
$('.carousel').carousel({
interval: 2000,
pause: “hover”,
wrap: true
})
Вы также можете вручную запускать события ползунка, используя фрагменты, подобные приведенным ниже:
.carousel('pause') // to pause the slider
.carousel('cycle') // to cycle through the slider items
.carousel(2) // to forcibly display the the 3rd slide in the slider
.carousel('prev') // to show the previous slide
.carousel(‘next’) // to show the next slide in the slider
Вышеуказанные методы могут вызываться из любого кода JavaScript для управления нормальной работой ползунка. Я считаю, что методы prevnext Особенно, когда они размещены вне родительского div карусели.
Вывод
Надеюсь, вам понравилось изучать, как создавать слайдеры JavaScript без написания тысяч строк кода JavaScript.
Я думаю, что при правильном использовании компоненты JavaScript Bootstrap окажутся важной частью вашего процесса разработки.
Они, безусловно, сэкономят вам больше всего времени на разработку. Самое главное, что они совместимы с разными браузерами, поэтому вам не нужно рвать на себе волосы, чтобы они работали в старых браузерах.
Посетите демонстрационную страницу.
Узнайте больше о компонентах JavaScript Bootstrap.
Если вы новичок в этом, вы можете начать изучать Twitter Bootstrap здесь .
Если у вас есть какие-либо предложения или отзывы по этой статье, укажите их ниже в разделе комментариев. Я буду рад услышать их и помочь, где смогу.