Руководство 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>
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
Учебник Bootstrap
Учебник Bootstrap
Учебник Bootstrap
Учебник Bootstrap
Учебник Bootstrap
Украшения для сайта
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Комментарии
На DLE 15.2 выводит тегом как есть {short-story-text} да и судя по коду плагина и не должен))
Rocky, Странно )) Сейчас пере залью, а пока вот код <?php if (!defined('DATALIFEENGINE')) { die("Hacking
admin, ну этого файла нет File engine/modules/iChat/show.php в Шаблоне 14.2
Rocky, В комплектации с шаблоном все есть , устанавливаете правильно пожалуйста. Возможно ошиблись. Кнопочки в стилях
где взять этот файл File engine/modules/iChat/show.php not found. движок 14.2, можете скинуть и как исправить это
Какие языки программирования Вы знаете