The Carousel Plugin
The Carousel Plugin adalah komponen untuk bersepeda melalui elemen, seperti carousel (slide).
Tip: Plugin dapat dimasukkan secara individual (menggunakan Bootstrap's individu "carousel.js" file), atau sekaligus (menggunakan "bootstrap.js" atau "bootstrap.min.js" ).
Carousel Contoh
chania
Suasana di Chania memiliki sentuhan Florence dan Venesia.
chania
Suasana di Chania memiliki sentuhan Florence dan Venesia.
Bunga-bunga
bunga cantik di Kolymbari, Crete.
Bunga-bunga
bunga cantik di Kolymbari, Crete.
Catatan: Carousels tidak didukung dengan baik di Internet Explorer 9 dan sebelumnya (karena mereka menggunakan CSS3 transisi dan animasi untuk mencapai efek slide).
Cara Membuat Carousel a
Contoh berikut menunjukkan cara membuat carousel dasar:
Contoh
<div id="myCarousel" class="carousel slide" 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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"
role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
</div>
<div
class="item">
<img src="img_chania2.jpg"
alt="Chania">
</div>
<div
class="item">
<img src="img_flower.jpg"
alt="Flower">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
</div>
</div>
<!-- Left and right controls -->
<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">Previous</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">Next</span>
</a>
</div>
Cobalah sendiri " misalnya Dijelaskan
Terluar <div> :
Komidi putar memerlukan penggunaan id (dalam hal ini id="myCarousel" ) untuk kontrol carousel untuk berfungsi dengan baik.
The class="carousel" menentukan bahwa ini <div> berisi korsel.
The .slide kelas menambahkan CSS transisi dan animasi efek, yang membuat item geser ketika menampilkan item baru. Abaikan kelas ini jika Anda tidak ingin efek ini.
The data-ride="carousel" atribut memberitahu Bootstrap untuk mulai menghidupkan carousel segera ketika beban halaman.
"Indicators" bagian:
Indikator adalah titik-titik kecil di bagian bawah setiap slide (yang menunjukkan berapa banyak slide yang ada di korsel, dan yang geser pengguna sedang melihat).
Indikator yang ditentukan dalam daftar memerintahkan dengan kelas .carousel-indicators .
The data-target atribut menunjuk ke id dari korsel.
The data-slide-to atribut menentukan yang meluncur pergi ke, ketika mengklik pada titik tertentu.
The "Wrapper untuk slide" bagian:
Slide ditentukan dalam <div> dengan kelas .carousel-inner .
Isi dari setiap slide didefinisikan dalam <div> dengan kelas .item . Hal ini dapat berupa teks atau gambar.
The .active kelas perlu ditambahkan ke salah satu slide. Jika tidak, carousel tidak akan terlihat.
The "Kiri dan kontrol yang tepat" bagian:
Kode ini menambahkan "kiri" dan "kanan" tombol yang memungkinkan pengguna untuk bolak-balik antara slide secara manual.
The data-slide atribut menerima kata kunci "prev" atau "next" , yang mengubah posisi slide relatif terhadap posisi saat ini.
Tambahkan Teks ke Slide
Tambahkan <div class="carousel-caption"> dalam setiap <div class="item"> untuk membuat teks keterangan untuk setiap slide:
Contoh
<div id="myCarousel" class="carousel slide" 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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"
role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The
atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div
class="item">
<img src="img_chania2.jpg"
alt="Chania">
<div
class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div
class="item">
<img src="img_flower.jpg"
alt="Flower">
<div
class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful
flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful
flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<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">Previous</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">Next</span>
</a>
</div>
Cobalah sendiri " Menyelesaikan Bootstrap Carousel Referensi
Untuk referensi lengkap semua pilihan carousel, metode dan peristiwa, pergi ke kami Bootstrap JS Carousel Referensi .