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

Corso di base Bootstrap

Estensioni Bootstrap

Plugin Carousel Bootstrap

Il plugin Carousel di Bootstrap è un modo flessibile e responsive per aggiungere slider ai siti. Inoltre, il contenuto è sufficientemente flessibile, può essere immagini, iframe incorporati, video o qualsiasi altro tipo di contenuto che desideri inserire.

se desideri citare funzionalità dell'estensione singolarmente, dovrai citare carousel.js. O come Panoramica delle estensioni Bootstrap come menzionato in bootstrap.js o la versione compressa bootstrap.min.js.

Esempio Online

Di seguito c'è una diapositiva semplice che utilizza il plugin Carousel di Bootstrap per visualizzare un componente generico di riproduzione in loop. Per creare una carosella, devi solo aggiungere il codice con questo tag. Non è necessario utilizzare l'attributo data, è sufficiente uno sviluppo basato su classi.

Esempio Online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Plugin Carousel semplice</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">
	<!-- Indici (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>　　　
	<!-- Progetti (Carousel) -->
	<div class="carousel-inner">
		<div class="item active">
			<img src="/run/images/slide1.png" alt="Prima diapositiva">
		</div>
		<div class="item">
			<img src="/run/images/slide2.png" alt="Seconda diapositiva">
		</div>
		<div class="item">
			<img src="/run/images/slide3.png" alt="Terza diapositiva">
		</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">Precedente</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">Successivo</span>
	</a>
</div>　
</body>
</html>
Prova a vedere ‹/›

I risultati sono mostrati di seguito:

un titolo opzionale

Puoi usare .item interno .carousel-caption Aggiunge un titolo alla diapositiva. Basta inserire qualsiasi HTML opzionale qui, verrà automaticamente allineato e formattato. Ecco un esempio:

Esempio Online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Titolo del plugin 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">
	<!-- Indici (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>　　　
	<!-- Progetti (Carousel) -->
	<div class="carousel-inner">
		<div class="item active">
			<img src="/run/images/slide1.png" alt="Prima diapositiva">
			<div class="carousel-caption">Titolo 1</div>
		</div>
		<div class="item">
			<img src="/run/images/slide2.png" alt="Seconda diapositiva">
			<div class="carousel-caption">Titolo 2</div>
		</div>
		<div class="item">
			<img src="/run/images/slide3.png" alt="Terza diapositiva">
			<div class="carousel-caption">Titolo 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">Precedente</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">Successivo</span>
	</a>
</div>　
</body>
</html>
Prova a vedere ‹/›

I risultati sono mostrati di seguito:


Uso

  • Tramite attributo datiL'uso dell'attributo dati può controllare facilmente la posizione del carosello (Carousel).

    • attributo data-slide Accetta i termini chiave prev o nextper modificare la posizione della diapositiva rispetto alla posizione corrente.

    • Usa data-slide-to Per passare un'indice di scorrimento originale alla presentazione,data-slide-to="2" Sposta il carosello a un indice specifico, iniziando da 0.

    • data-ride="carousel" L'attributo viene utilizzato per indicare che la presentazione dovrebbe iniziare l'animazione alla caricamento della pagina.

  • Tramite JavaScriptLa presentazione (Carousel) può essere chiamata manualmente tramite JavaScript, come mostrato di seguito:

    $('.carousel').carousel()

Opzione

Alcune opzioni sono trasmesse tramite attributi dati o JavaScript. La seguente tabella elenca queste opzioni:

Nome opzioneTipo/predefinitoNome attributo datiDescrizione
intervalnumber
Valore predefinito: 5000		data-intervalTempo di attesa tra ogni elemento del ciclo automatico. Se impostato a false, la presentazione non ripeterà automaticamente.
pausestring
Valore predefinito: "hover"		data-pauseFerma la riproduzione in loop quando il mouse entra e la riprende quando il mouse esce.
wrapboolean
Valore predefinito: true		data-wrapSe la presentazione ripete continuamente.

Metodi

Ecco alcuni metodi utili presenti nell'plugin di presentazione (Carousel):

MetodiDescrizioneEsempio
.carousel(options)Inizializza la presentazione a scelta multipla come oggetto opzionale e inizia il ciclo degli elementi.
$('#identifier').carousel({
　　　　interval: 2000
)
.carousel('cycle')Riproduce gli elementi in senso orario.
$('#identifier').carousel('cycle')
.carousel('pause')Ferma il ciclo di riproduzione degli elementi.
$('#identifier').carousel('pause')
.carousel(number)Passa alla finestra specifica diapositiva (iniziando da 0, come un array).
$('#identifier').carousel(number)
.carousel('prev')循环轮播到上一个项目。
$('#identifier').carousel('prev')
.carousel('next')循环轮播到下一个项目。
$('#identifier').carousel('next')

Esempio Online

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

Esempio Online

<!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">
	<!-- Indici (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>　　　
	<!-- Progetti (Carousel) -->
	<div class="carousel-inner">
		<div class="item active">
		<img src="/run/images/slide1.png" alt="Prima diapositiva">
		</div>
		<div class="item">
		<img src="/run/images/slide2.png" alt="Seconda diapositiva">
		</div>
		<div class="item">
		<img src="/run/images/slide3.png" alt="Terza diapositiva">
		</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">Precedente</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">Successivo</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');
		});
		// Passare in loop al progetto successivo
		$(".next-slide").click(function() {
			$("#myCarousel").carousel('next');
		});
		// Passare in loop a un'immagine specifica　
		$(".slide-one").click(function() {
			$("#myCarousel").carousel(0);
		});
		$(".slide-two").click(function() {
			$("#myCarousel").carousel(1);
		});
		$(".slide-three").click(function() {
			$("#myCarousel").carousel(2);
		});
	});
</script>
</body>
</html>
Prova a vedere ‹/›

I risultati sono mostrati di seguito:


Evento

La tabella seguente elenca gli eventi che devono essere utilizzati nel plugin Carousel (Carousel). Questi eventi possono essere utilizzati come钩子 all'interno della funzione.

EventoDescrizioneEsempio
slide.bs.carouselQuesto evento viene attivato immediatamente quando viene chiamato il metodo slide dell'esempio.
$('#identifier').on('slide.bs.carousel', function () {
　　　　// Eseguire alcune azioni...
)
slid.bs.carouselQuesto evento viene attivato quando il carosello termina l'effetto di transizione della diapositiva.
$('#identifier').on('slid.bs.carousel', function () {
　　　　// Eseguire alcune azioni...
)

Esempio Online

Di seguito è riportato un esempio che dimostra l'uso degli eventi:

Esempio Online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Esempio - Plugin Carousel (Carousel) Eventi</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">
	<!-- Indici (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>　　　
	<!-- Progetti (Carousel) -->
	<div class="carousel-inner">
		<div class="item active">
			<img src="/run/images/slide1.png" alt="Prima diapositiva">
		</div>
		<div class="item">
			<img src="/run/images/slide2.png" alt="Seconda diapositiva">
		</div>
		<div class="item">
			<img src="/run/images/slide3.png" alt="Terza diapositiva">
		</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">Precedente</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">Successivo</span>
	</a>
</div>　
<script>
	$(function() {
		$('#myCarousel').on('slide.bs.carousel', function () {
			alert("L'evento viene attivato immediatamente quando viene chiamato il metodo slide.");
		});
	});
</script>
</body>
</html>
Prova a vedere ‹/›

I risultati sono mostrati di seguito:

Norme di Codifica HTML BootstrapPlugin di Pieghevole Bootstrap