English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основной учебник Bootstrap

Плагины Bootstrap

Bootstrap Carousel плагин

Bootstrap Carousel плагин - это гибкий адаптивный способ добавить слайдер на сайт. Помимо этого, контент также достаточно гибок и может быть изображением, интегрированным фреймом, видео или любым другим типом контента, который вы хотите разместить.

Если вы хотите ссылаться на функции плагина отдельно, вам нужно ссылаться на carousel.jsили, как Обзор плагинов Bootstrap как было упомянуто в главе bootstrap.js или сжатой версии bootstrap.min.js。

Онлайн пример

Ниже приведен пример простого слайдера, который использует плагин Bootstrap Carousel для отображения циклического компонента. Для создания слайдера достаточно добавить код с этим тегом. Не нужно использовать атрибуты data, достаточно простого развития на основе класса.

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap　-　Простая плагин слайдера (Carousel)</title>
	<link　rel="stylesheet"　href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide">
	<!-- Индикаторы (Carousel) -->
	<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>　　　
	<!-- Проект (Carousel) -->
	<div class="carousel-inner">
		<div class="item active">
			<img src="/run/images/slide1.png" alt="Первый слайд">
		</div>
		<div class="item">
			<img src="/run/images/slide2.png" alt="Второй слайд">
		</div>
		<div class="item">
			<img src="/run/images/slide3.png" alt="Третий слайд">
		</div>
	</div>
	<!-- Навигация (Carousel) -->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		<span class="sr-only">Предыдущий</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">Следующий</span>
	</a>
</div>　
</body>
</html>
Проверьте ‹/›

Результаты показаны ниже:

дополнительные заголовки

Вы можете использовать .item внутри .carousel-caption Элемент добавляет заголовок к слайдам. Достаточно просто поместить здесьany optional HTML, и он автоматически выровняет и отформатирует. Ниже приведен пример:

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap　-　Заголовок компонента слайдера (Carousel)</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide">
	<!-- Индикаторы (Carousel) -->
	<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>　　　
	<!-- Проект (Carousel) -->
	<div class="carousel-inner">
		<div class="item active">
			<img src="/run/images/slide1.png" alt="Первый слайд">
			<div　class="carousel-caption">Заголовок　1</div>
		</div>
		<div class="item">
			<img src="/run/images/slide2.png" alt="Второй слайд">
			<div　class="carousel-caption">Заголовок　2</div>
		</div>
		<div class="item">
			<img src="/run/images/slide3.png" alt="Третий слайд">
			<div class="carousel-caption">Заголовок 3</div>
		</div>
	</div>
	<!-- Навигация (Carousel) -->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
	　　　　<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	　　　　<span class="sr-only">Предыдущий</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
	　　　　<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	　　　　<span class="sr-only">Следующий</span>
	</a>
</div>　
</body>
</html>
Проверьте ‹/›

Результаты показаны ниже:


Использование

  • Through data attributes: Использование атрибутов данных позволяет легко контролировать положение слайдера (Carousel).

    • атрибут data-slide принимает ключевые слова prev или nextчтобы изменить положение слайдов по отношению к текущему положению.

    • Используется data-slide-to Чтобы передать исходный индекс для滑动а в слайдер,data-slide-to="2" Переместить слайдер к определенному индексу,计数 начинается с 0.

    • data-ride="carousel" Атрибут используется для обозначения того, что слайдер начинает анимацию при загрузке страницы.

  • Through JavaScript: Слайдер (Carousel) можно вызвать вручную, как показано ниже:

    $('.carousel').carousel()

Параметр

Некоторые параметры передаются через атрибуты данных или JavaScript. В таблице ниже приведены эти параметры:

Название параметраТип/по умолчаниюИмя свойства данныхОписание
intervalnumber
по умолчанию: 5000		data-intervalВремя задержки между показом каждого элемента. Если false, слайдер не будет автоматически показывать.
pausestring
по умолчанию: "hover"		data-pauseПауза циклического показа при наведении мыши, возобновление при выходе мыши.
wrapboolean
по умолчанию: true		data-wrapЦиклический показ продолжается ли непрерывно.

Методы

Ниже приведены некоторые полезные методы плагина слайдера (Carousel):

МетодыОписаниеПример
.carousel(options)Инициализация слайдера с опциональным объектом options и начало циклического показа.
$('#identifier').carousel({
　　　　interval:　2000
)
.carousel('cycle')Циклический показ элементов слева направо.
$('#identifier').carousel('cycle')
.carousel('pause')Остановить циклический показ элементов.
$('#identifier').carousel('pause')
.carousel(number)Циклический показ определенного кадра (счет начинается с 0, как в массиве).
$('#identifier').carousel(number)
.carousel('prev')循环轮播到上一个项目。
$('#identifier').carousel('prev')
.carousel('next')循环轮播到下一个项目。
$('#identifier').carousel('next')

Онлайн пример

下面的示例演示了方法的用法：

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap　示例　-　轮播(Carousel)插件方法</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide">
	<!-- Индикаторы (Carousel) -->
	<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>　　　
	<!-- Проект (Carousel) -->
	<div class="carousel-inner">
		<div class="item active">
		<img src="/run/images/slide1.png" alt="Первый слайд">
		</div>
		<div class="item">
		<img src="/run/images/slide2.png" alt="Второй слайд">
		</div>
		<div class="item">
		<img src="/run/images/slide3.png" alt="Третий слайд">
		</div>
	</div>
	<!-- Навигация (Carousel) -->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
	　　　　<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	　　　　<span class="sr-only">Предыдущий</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
	　　　　<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	　　　　<span class="sr-only">Следующий</span>
	</a>
</div>
<!--　控制按钮　-->
<div　style="text-align:center;">
	<input　type="button"　class="btn　start-slide"　value="Start">
	<input　type="button"　class="btn　pause-slide"　value="Pause">
	<input　type="button"　class="btn　prev-slide"　value="Previous　Slide">
	<input　type="button"　class="btn　next-slide"　value="Next　Slide">
	<input　type="button"　class="btn　slide-one"　value="Slide　1">
	<input　type="button"　class="btn　slide-two"　value="Slide　2">
	<input　type="button"　class="btn　slide-three"　value="Slide　3">
</div>
<script>
	$(function() {
		//　初始化轮播
		$(".start-slide").click(function(){
			$("#myCarousel").carousel('cycle');
		});
		//　停止轮播
		$(".pause-slide").click(function(){
			$("#myCarousel").carousel('pause');
		});
		//　循环轮播到上一个项目
		$(".prev-slide").click(function(){
			$("#myCarousel").carousel('prev');
		});
		// Повторно прокрутить карусель к следующему элементу
		$(".next-slide").click(function(){
			$("#myCarousel").carousel('next');
		});
		// Повторно прокрутить карусель к определенному кадру　
		$(".slide-one").click(function(){
			$("#myCarousel").carousel(0);
		});
		$(".slide-two").click(function(){
			$("#myCarousel").carousel(1);
		});
		$(".slide-three").click(function(){
			$("#myCarousel").carousel(2);
		});
	});
</script>
</body>
</html>
Проверьте ‹/›

Результаты показаны ниже:


Событие

В таблице ниже перечислены события, используемые в плагине Carousel. Эти события могут быть использованы в функции в качестве хуков.

СобытиеОписаниеПример
slide.bs.carouselЭтот事件 срабатывает немедленно при вызове метода slide.
$('#identifier').on('slide.bs.carousel', function () {
　　　　// Выполнить некоторые действия...
)
slid.bs.carouselЭтот事件 срабатывает при завершении эффекта перехода слайдов карусели.
$('#identifier').on('slid.bs.carousel', function () {
　　　　// Выполнить некоторые действия...
)

Онлайн пример

Ниже приведен пример использования событий:

Онлайн пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap пример - Карусель (Carousel) плагин события</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide">
	<!-- Индикаторы (Carousel) -->
	<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>　　　
	<!-- Проект (Carousel) -->
	<div class="carousel-inner">
		<div class="item active">
			<img src="/run/images/slide1.png" alt="Первый слайд">
		</div>
		<div class="item">
			<img src="/run/images/slide2.png" alt="Второй слайд">
		</div>
		<div class="item">
			<img src="/run/images/slide3.png" alt="Третий слайд">
		</div>
	</div>
	<!-- Навигация (Carousel) -->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
	　　　　<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	　　　　<span class="sr-only">Предыдущий</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
	　　　　<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	　　　　<span class="sr-only">Следующий</span>
	</a>
</div>　
<script>
	$(function() {
		$('#myCarousel').on('slide.bs.carousel', function () {
			alert("Событие срабатывает немедленно при вызове метода slide.");
		});
	});
</script>
</body>
</html>
Проверьте ‹/›

Результаты показаны ниже:

Правила кодирования HTML BootstrapПлагин складывания Bootstrap