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

Tutoriel de base Bootstrap

Plugins Bootstrap

Plugin Carousel (Carousel) Bootstrap

Le plugin Carousel (Carousel) Bootstrap est un moyen flexible et responsive d'ajouter des glisseurs à un site. En plus de cela, le contenu est suffisamment flexible, il peut être des images, des frames intégrés, des vidéos ou tout autre type de contenu que vous souhaitez placer.

Si vous souhaitez utiliser séparément les fonctionnalités de cet plugin, vous devez utiliser carousel.js。Ou, comme Aperçu des plugins Bootstrap comme mentionné dans le chapitre bootstrap.js ou la version compressée bootstrap.min.js。

Exemple en ligne

Voici un simple diaporama, utilisant le plugin Carousel (Carousel) de Bootstrap pour afficher un composant générique de lecture en boucle. Pour créer un carrousel, il suffit d'ajouter le code portant ce marqueur. Il n'est pas nécessaire d'utiliser l'attribut data, mais une simple développement basé sur la classe est suffisant.

Exemple en ligne

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8>　
	<title>Exemple Bootstrap　-　Plugin simple 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">
	<!----　Indicateurs de diaporama (Carousel)　-->
	<ol　class="carousel-indicators">
		<li　data-target="#myCarousel"　data-slide-to="0" class="active"></li>
		<li　data-target="#myCarousel"　data-slide-to="1<span>/li>
		<li　data-target="#myCarousel"　data-slide-to="2<span>/li>
	</ol>　　　
	<!----　Projets de diaporama (Carousel)　-->
	<div　class="carousel-inner">
		<div　class="item　active">
			<img　src="/run/images/slide1.png"　alt="Diapositive une">
		</div>
		<div　class="item">
			<img　src="/run/images/slide2.png"　alt="Diapositive deuxième">
		</div>
		<div　class="item">
			<img　src="/run/images/slide3.png"　alt="Diapositive troisième">
		</div>
	</div>
	<!----　Navigation de diaporama (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">Précédent</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">Suivant</span>
	</a>}}
</div>　
</body>
</html>
Voyons un test ‹/›

Les résultats sont affichés comme suit :

Titre optionnel

Vous pouvez utiliser .item intérieur .carousel-caption Ajoutez un titre aux diapositives. Il suffit de placer n'importe quel HTML optionnel ici, il sera automatiquement aligné et formaté. L'exemple suivant montre cela :

Exemple en ligne

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8>　
	<title>Exemple Bootstrap　-　Titre du plugin Carousel (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">
	<!----　Indicateurs de diaporama (Carousel)　-->
	<ol　class="carousel-indicators">
		<li　data-target="#myCarousel"　data-slide-to="0" class="active"></li>
		<li　data-target="#myCarousel"　data-slide-to="1<span>/li>
		<li　data-target="#myCarousel"　data-slide-to="2<span>/li>
	</ol>　　　
	<!----　Projets de diaporama (Carousel)　-->
	<div　class="carousel-inner">
		<div　class="item　active">
			<img　src="/run/images/slide1.png"　alt="Diapositive une">
			<div　class="carousel-caption">Titre　1</div>
		</div>
		<div　class="item">
			<img　src="/run/images/slide2.png"　alt="Diapositive deuxième">
			<div　class="carousel-caption">Titre　2</div>
		</div>
		<div　class="item">
			<img　src="/run/images/slide3.png"　alt="Diapositive troisième">
			<div　class="carousel-caption">Titre　3</div>
		</div>
	</div>
	<!----　Navigation de diaporama (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">Précédent</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">Suivant</span>
	</a>}}
</div>　
</body>
</html>
Voyons un test ‹/›

Les résultats sont affichés comme suit :


Utilisation

  • Par l'attribut data：L'utilisation de l'attribut data permet de contrôler facilement la position du carrousel (Carousel).

    • Propriétés data-slide Accepte les mots-clés prev ou next，utilisé pour changer la position du diaporama par rapport à la position actuelle.

    • Utilisez data-slide-to Pour transmettre un index de glisse original au carrouseldata-slide-to="2" Déplacez le glisseur à un index spécifique, l'index commence à 0.

    • data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。

  • 通过 JavaScript：轮播(Carousel)可通过 JavaScript 手动调用，如下所示：

    $('.carousel').carousel()

选项

有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：

选项名称类型/默认值Data 属性名称Description
intervalnumber
默认值：5000		data-interval自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。
pausestring
默认值："hover"		data-pause鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。
wrapboolean
默认值：true		data-wrap轮播是否连续循环。

方法

下面是一些轮播(Carousel)插件中有用的方法：

方法DescriptionExemple
.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')

Exemple en ligne

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

Exemple en ligne

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8>　
	<title>Exemple 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">
	<!----　Indicateurs de diaporama (Carousel)　-->
	<ol　class="carousel-indicators">
		<li　data-target="#myCarousel"　data-slide-to="0" class="active"></li>
		<li　data-target="#myCarousel"　data-slide-to="1<span>/li>
		<li　data-target="#myCarousel"　data-slide-to="2<span>/li>
	</ol>　　　
	<!----　Projets de diaporama (Carousel)　-->
	<div　class="carousel-inner">
		<div　class="item　active">
		<img　src="/run/images/slide1.png"　alt="Diapositive une">
		</div>
		<div　class="item">
		<img　src="/run/images/slide2.png"　alt="Diapositive deuxième">
		</div>
		<div　class="item">
		<img　src="/run/images/slide3.png"　alt="Diapositive troisième">
		</div>
	</div>
	<!----　Navigation de diaporama (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">Précédent</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">Suivant</span>
	</a>}}
</div>
<!----　控制按钮　-->
<div style="text-align:center;">
	<input type="button" class="btn start-slide"　value="Start">
	
	
	
	Voyons un test ‹/›

Les résultats sont affichés comme suit :


Événement

Le tableau suivant liste les événements utilisés dans le plugin Carousel. Ces événements peuvent être utilisés comme hooks dans les fonctions.

ÉvénementDescriptionExemple
slide.bs.carouselCet événement est déclenché immédiatement lors de l'appel de la méthode d'exemple slide.
$('#identifier').on('slide.bs.carousel', function () {
　　　　//　Exécuter certaines actions...
)
slid.bs.carouselCe événement est déclenché lorsque l'effet de transition de la diapositive du carrousel est terminé.
$('#identifier').on('slid.bs.carousel', function () {
　　　　//　Exécuter certaines actions...
)

Exemple en ligne

Les exemples suivants montrent l'utilisation des événements :

Exemple en ligne

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8>　
	<title>Exemple Bootstrap　-　Événements du plugin Diaporama (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">
	<!----　Indicateurs de diaporama (Carousel)　-->
	<ol　class="carousel-indicators">
		<li　data-target="#myCarousel"　data-slide-to="0"　
			class="active">/li>
		<li　data-target="#myCarousel"　data-slide-to="1<span>/li>
		<li　data-target="#myCarousel"　data-slide-to="2<span>/li>
	</ol>　　　
	<!----　Projets de diaporama (Carousel)　-->
	<div　class="carousel-inner">
		<div　class="item　active">
			<img　src="/run/images/slide1.png"　alt="Diapositive une">
		</div>
		<div　class="item">
			<img　src="/run/images/slide2.png"　alt="Diapositive deuxième">
		</div>
		<div　class="item">
			<img　src="/run/images/slide3.png"　alt="Diapositive troisième">
		</div>
	</div>
	<!----　Navigation de diaporama (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">Précédent</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">Suivant</span>
	</a>}}
</div>　
<script>
	$(function() {
		$('#myCarousel').on('slide.bs.carousel', function () {
			alert("L'événement est déclenché immédiatement lors de l'appel de la méthode d'exemple slide .");
		});
	});
</script>
</body>
</html>
Voyons un test ‹/›

Les résultats sont affichés comme suit :

Norme de codage HTML BootstrapPlugin de pli Bootstrap