Руководство Bootstrap Carousel
1- Bootstrap Carousel
Carousel (Карусель) похожа на слайдшоу (slidershow), он отображает цикл определенного содержания, например фото, текст,... Carousel у Bootstrap была построена на основании CSS и немного jаvascript.Ниже показано изображение иллюстрирующее Carousel, оно отображает цикл некоторых фото.
Карусель имеет следующую структруру:
Самая простая Carousel включает только Item (Slider) и содержание каждого Slider это фото. Она не включает управления (Controls), и не имеет Indicators.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Carousel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h4 class="mb-3">Simple Carousel</h4>
<div id="myCarousel" class="carousel slide border" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Panther">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Black Cat">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion">
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>2- Carousel с Controls
Обычная Carousel имеет кнопки "Next" и "Previous" позволяющие пользователю перейти к следующему Slider или назад к предыдущему Slider. Они называются управлением (Controls).
<div id="myCarousel" class="carousel slide border" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Leopard">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Cat">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion">
</div>
</div>
<!-- Controls -->
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Пример кастомизации Controls:
.carousel-control-prev-icon {
background-image: url(../images/previous-32.png);
width: 32px;
height: 32px;
}
.carousel-control-next-icon {
background-image: url(../images/next-32.png);
width: 32px;
height: 32px;
}
3- Carousel с Indicators
Indicators похожи на Shortcut, которые помогают пользователю перейти к определенному Item (Slider) в списке Item у Carousel. Примечание: Item в Carousel индексированы (index) начиная с 0 (0, 1, 2,..)
<div id="myCarousel" class="carousel slide border" 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>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Leopard">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Cat">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion">
</div>
</div>
<!-- Controls -->
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Ниже показаны некоторые примеры кастомизации Indicators.
Custom Indicators (1)
.carousel-indicators li {
width: 20px;
height: 20px;
border-radius: 100%;
}Custom Indicators (2)
Стили:
.carousel-indicators li {
text-indent: 0px;
text-align: center;
color: red;
margin: 0 2px;
width: 30px;
height: 30px;
border: none;
border-radius: 100%;
line-height: 30px;
background-color: #999;
transition: all 0.25s ease;
}
.carousel-indicators .active, .hover {
margin: 0 2px;
width: 30px;
height: 30px;
background-color: #337ab7;
}<div id="myCarousel" class="carousel slide border" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active">1</li>
<li data-target="#myCarousel" data-slide-to="1">2</li>
<li data-target="#myCarousel" data-slide-to="2">3</li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Panther">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Black Cat">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion">
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Custom Indicators (3)
.carousel-indicators {
position: absolute;
bottom: 0;
margin: 0;
left: 0;
right: 0;
width: auto;
}
.carousel-indicators li, .carousel-indicators li.active {
float: left;
width: 33%;
height: 10px;
margin: 0;
border-radius: 0;
border: 0;
background: #ccc;
}
.carousel-indicators li.active {
background: orange;
}4- Carousel с титром (Caption)
Для каждого Slider вы можете добавить к нему титры (Caption). Это легко выполнимо, обернув содержание вашего титра в тег <div class="carousel-caption">.
<div id="myCarousel" class="carousel slide border" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Leopard">
<div class="carousel-caption">
<h5>Leopard</h5>
<small>
A black Panther is the melanistic color variant of any big cat species.
Black Panthers in Asia and Africa are leopards (Panthera pardus).
</small>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Cat">
<div class="carousel-caption">
<h5>Black Cat</h5>
<small>
A black cat is a domestic cat with black fur that may be a mixed or specific breed
</small>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion">
<div class="carousel-caption">
<h5>Lion</h5>
<small>
The lion (Panthera leo) is a species in the cat family (Felidae).
A muscular, deep-chested cat, it has a short, rounded head, a reduced neck and round ears
</small>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Описание может отображаться на устройствах с широким экраном, для устройств с слишком маленьким экраном вы можете его скрыть. Это можно выполнить в помощью класса .d-(sm|md|lg|xl)-block, .d-none.
| Класс | Описание |
| .d-sm-block .d-none | Caption отобразится если ширина Carousel >= 567px. Если наоборот, то будет скрыто |
| .d-md-block .d-none | Caption отобразится если ширина Carousel >= 768px. Если наоборот, то будет скрыто |
| .d-lg-block .d-none | Caption отобразится если ширина Carousel >= 992px. Если наоборот, то будет скрыто |
| .d-xl-block .d-none | Caption отобразится если ширина Carousel >= 1200px. Если наоборот, то будет скрыто |
Пример кода:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Carousel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h4 class="mb-3">Responsive Carousel with Caption</h4>
<p>.carousel-caption .d-none .d-sm-block</p>
<div id="myCarousel" class="carousel slide border" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Leopard">
<div class="carousel-caption d-none d-sm-block">
<h5>Leopard</h5>
<small>
A black Panther is the melanistic color variant of any big cat species.
Black Panthers in Asia and Africa are leopards (Panthera pardus).
</small>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Cat">
<div class="carousel-caption d-none d-sm-block">
<h5>Black Cat</h5>
<small>
A black cat is a domestic cat with black fur that may be a mixed or specific breed
</small>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion">
<div class="carousel-caption d-none d-sm-block">
<h5>Lion</h5>
<small>
The lion (Panthera leo) is a species in the cat family (Felidae).
A muscular, deep-chested cat, it has a short, rounded head,
a reduced neck and round ears
</small>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>5- Эффект (Effect)
Добавьте класс .carousel-fade для Carousel, и вы увидите эффект fade (затухание) когда Carousel сменяется с одного Slider на другой Slider.
<div id="myCarousel" class="carousel carousel-fade slide border" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Leopard">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Cat">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion">
</div>
</div>
<!-- Controls -->
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>6 - Инициализация карусели с помощью jаvascript
Карусель можно активировать с помощью кода jаvascript:$('.carousel').carousel();Настройка карусели
Настройка карусели осуществляется с помощью параметров. Параметры можно устанавливать как с помощью data-атрибутов, так и посредством jаvascript.При использовании data-атрибутов, добавьте к имени параметра приставку data-. Например, для установки параметра interval необходимо использовать атрибут с именем data-interval.
| Имя | Описание |
|---|---|
| interval | Значение по умолчанию (миллисекунд): 5000, т.е. 5 секунд. Параметр interval устанавливает количество времени в миллисекундах (паузу) между автоматической сменой слайдов карусели. Если данному параметру указать значение false, то карусель не будет выполнять автоматическую смену слайдов. |
| keyboard | Значение по умолчанию: true. Данный параметр определяет должна ли карусель реагировать на события клавиатуры. |
| pause | Значение по умолчанию: "hover". Если параметр pause имеет значение "hover", то смена слайдов, при нахождении курсора над ней, не будет выполняться. А при покидании курсора смена слайдов будет опять возобновляться. Если параметру pause установить значение false, то нахождение курсора над каруселью не будет останавливать автоматическую смену слайдов. На устройствах с сенсорным экраном, при значении "hover", пауза будет устанавливаться на касание. Но после касания, карусель начнёт сменять слайды только после времени, равное 2 интервалам (по умолчанию, равное 10 секундам). |
| ride | Значение по умолчанию: false. При значении false, запуск автоматической смены слайдов произойдёт только после того, как пользователь вручную (с помощью элементов управления или индикаторов) перейдёт к другому слайду. Если в качестве этого параметра установить значение "carousel", то смена слайдов запустится автоматически сразу после загрузки страницы. |
| wrap | Значение по умолчанию: true. Данный параметр определяет должна ли смена слайдов зацикливаться. Т.е. после последнего слайда осуществляться переход к первому при движении next и после первого к последнему при движении prev. Если это не нужно, то значение параметра wrap необходимо установить равное false. |
Методы плагина Carousel
| Имя | Описание |
|---|---|
| .carousel(options) | Инициализирует один или множество выбранных элементов в качестве карусели с указанными параметрами. |
| .carousel('cycle') | Запускает процесс автоматической смены слайдов (слева направо). |
| .carousel('pause') | Отменяет процесс автоматической смены слайдов. |
| .carousel(number) | Выполняет переход на указанный слайд карусели. Отсчёт слайдов ведётся с 0. Поэтому, например, чтобы перейти на второй слайд, методу carousel необходимо передать число 1. |
| .carousel('prev') | Выполняет переход на предыдущий слайд. |
| .carousel('next') | Выполняет переход на следующий слайд. |
Пример инициализации карусели с параметрами:
<div id="carousel" class="carousel slide">
...
</div>
...
<script>
$(function () {
$('#carousel').carousel({
interval: 10000,
keyboard: false,
pause: 'hover',
ride: 'carousel',
wrap: false
});
});
</script>Пример использование методов для управления каруселью:
<div id="carousel" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="..." alt="...">
</div>
<div class="carousel-item">
<img class="img-fluid" src="..." alt="...">
</div>
<div class="carousel-item">
<img class="img-fluid" src="..." alt="...">
</div>
</div>
</div>
<div class="my-2">
<button class="btn btn-primary" data-action="cycle">Запустить</button>
<button class="btn btn-primary" data-action="pause">Остановить</button>
<button class="btn btn-primary" data-action="prev">Предыдущий</button>
<button class="btn btn-primary" data-action="next">Следующий</button>
<button class="btn btn-primary" data-action="to-1">На 1 слайд</button>
<button class="btn btn-primary" data-action="to-2">На 2 слайд</button>
<button class="btn btn-primary" data-action="to-3">На 3 слайд</button>
</div>
...
<script>
$(function () {
// метод cycle
$('.btn').click(function () {
var action = $(this).attr('data-action');
if (action.indexOf('to') >= 0) {
var action = parseInt(action.substring(3))-1;
}
$('#carousel').carousel(action);
});
});
</script>События плагина Carousel
JS Bootstrap генерирует для карусели два события.| Имя | Описание |
|---|---|
| slide.bs.carousel | Событие возникает перед началом смены слайда. |
| slid.bs.carousel | Событие возникает после завершения смены слайда. |
Оба эти события имеют следующие дополнительные свойства:
- direction - направление слайдинга ("left" или "right");
- relatedTarget - DOM-элемент, который перемещается на место текущего;
- from - индекс текущего элемента;
- to - индекс следующего элемента.
Свойства from и to имеются только в Bootstrap 4.
Пример работы с событиями:
<!-- Bootstrap 4 -->
<div class="container">
<div class="row">
<div class="col-6">
<div id="carousel" class="carousel slide" data-ride="carousel">
...
</div>
<ul class="info text-left"></ul>
</div>
<div class="col-6">
<ul class="log text-left" style="height: 200px; overflow-y: auto;"></ul>
</div>
</div>
</div>
...
<script>
$(function () {
var t = function () {
var now = new Date();
var m = now.getMinutes();
var s = now.getSeconds();
if (m < 10) m = '0' + m;
if (s < 10) s = '0' + s;
return m + ':' + s;
};
$('#carousel').on('slide.bs.carousel', function (e) {
$('.log').prepend('<li>' + t() + ' - slide.bs.carousel</li>');
var info = '<li><b>direction</b> = ' + e.direction + '</li>';
info += '<li><b>DOM-элемент</b> = ' + $(e.relatedTarget).attr('id') + '</li>';
info += '<li><b>from</b> = ' + e.from + '</li>';
info += '<li><b>to</b> = ' + e.to + '</li>';
$('.info').html(info);
});
$('#carousel').on('slid.bs.carousel', function (e) {
$('.log').prepend('<li>' + t() + ' - slid.bs.carousel</li>');
});
});
</script>Изменение длительности перехода (Bootstrap 4)
Длительность перехода элементов .carousel-item может быть изменена с помощью Sass переменной $carousel-transition перед компиляцией или пользовательскими стилями, если используете уже скомпилированный CSS. Если применяете несколько переходов, то выполните сначала transition transform (например: transform 2.5s ease, opacity .75s ease-out).Примеры
1. Карусель с автоматической нумерацией слайдов:<style>
.carousel-number {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, .8);
line-height: 40px;
font-size: 20px;
}
</style>
...
<script>
$('.carousel').find('.carousel-item').each(function (index, item) {
var carouselItem = $(item).find('.carousel-number');
if (carouselItem.length > 0) {
carouselItem.text(index + 1);
return;
}
var element = $('<div></div>');
element
.addClass('carousel-number')
.text(index + 1);
$(item).append(element);
});
</script>
У данной публикации нет комментариев.
admin
Автор1-08-2020, 14:36
Дата пуликацииУчебник Bootstrap
Категория- Комментариев: 0
- Просмотров: 47
Учебник Bootstrap
Учебник Bootstrap
Учебник Bootstrap
Украшения для сайта
Учебник Bootstrap
Учебник Bootstrap
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Перебей баннер
Советы
Не работает хак или модуль? Попробуй Очистить кеш!
Лучший букс
Ваша реклама
Комментарии
Niko,
по инструкуии
по инструкуии
Вчера, 19:03
admin
Теперь скажите, как мне эту ПАРАШУ удалить?
Вчера, 10:31
Niko
Exzy,доступ пожалуйста в лс дайте
2 августа 2020 18:58
admin
Не работает Красная кнопка Закрытия окна сайдбара, которая появляется в мобильной версии сайта. Как можно её исправить?
2 августа 2020 11:18
Exzy
Exzy,
да не за что!
да не за что!
1 августа 2020 11:18
admin
Какие языки программирования Вы знаете
Облако тегов
Bootstrap bootstrap css CSS CSS3 DLE dle Flat Design html html5 Payeer PNG PSD wap Скрипт удвоителя адаптивный адаптивный шаблон биткоин вап дизайн игровой хостинг иконки лендинг макет меню модуль панель портфолио сайт скрипт соц сети текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
