JS Carousel (carousel.js)
The Carousel Plugin adalah komponen untuk bersepeda melalui elemen, seperti carousel (slide).
Untuk tutorial tentang Carousels, baca Bootstrap Carousel Tutorial .
Catatan: Carousels tidak didukung dengan baik di Internet Explorer 9 dan sebelumnya (karena mereka menggunakan CSS3 transisi dan animasi untuk mencapai efek slide).
Carousel Plugin Kelas
| Kelas | Deskripsi |
|---|---|
| .carousel | Menciptakan korsel |
| .slide | Menambahkan transisi CSS dan efek animasi saat meluncur dari satu item ke item berikutnya. Hapus kelas ini jika Anda tidak ingin efek ini |
| .carousel-indicators | Menambahkan indikator untuk korsel. Ini adalah titik-titik kecil di bagian bawah setiap slide (yang menunjukkan berapa banyak slide yang ada di korsel, dan yang meluncur pengguna sedang melihat) |
| .carousel-inner | Menambahkan slide ke korsel |
| .item | Menentukan isi setiap slide |
| .left carousel-control | Menambahkan tombol kiri untuk carousel, yang memungkinkan pengguna untuk kembali antara slide |
| .right carousel-control | Menambahkan tombol kanan untuk carousel, yang memungkinkan pengguna untuk maju antara slide |
| .carousel-caption | Menentukan keterangan untuk korsel |
Via data-* Atribut
The data-ride="carousel" atribut mengaktifkan korsel.
The data-slide dan data-slide-to atribut menentukan yang meluncur pergi ke.
The data-slide atribut menerima dua nilai: prev atau ke depan, sementara data-slide-to menerima nomor.
Contoh
<!--
Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!--
Carousel Indicators -->
<li data-target="#myCarousel" data-slide-to="1"></li>
<!--
Carousel Controls -->
<a
class="left carousel-control" href="#myCarousel" data-slide="prev">
Cobalah sendiri " via JavaScript
Aktifkan manual dengan:
Contoh
// Activate Carousel
$("#myCarousel").carousel();
// Enable
Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
Cobalah sendiri " Pilihan Carousel
Pilihan bisa dilalui melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan untuk data-, sebagai data interval = "".
| Nama | Mengetik | kegagalan | Deskripsi | Cobalah |
|---|---|---|---|---|
| interval | number, or the boolean false | 5000 | Menentukan delay (dalam milidetik) di antara setiap slide. Catatan: Mengatur interval ke false untuk menghentikan item dari otomatis geser | Menggunakan JS menggunakan data yang |
| pause | string, or the boolean false | "hover" | Jeda korsel akan melalui slide berikutnya saat pointer mouse memasuki korsel, dan resume geser ketika pointer mouse meninggalkan korsel Catatan: Atur jeda ke false untuk menghentikan kemampuan untuk menghentikan di hover | Menggunakan JS menggunakan data yang |
| wrap | boolean | true | Menentukan apakah korsel harus melalui semua slide terus menerus, atau berhenti di slide terakhir
| Menggunakan JS menggunakan data yang |
Metode Carousel
Tabel berikut berisi metode carousel semua tersedia.
| metode | Deskripsi | Cobalah |
|---|---|---|
| .carousel( options ) | Mengaktifkan carousel dengan opsi. Lihat pilihan di atas nilai-nilai yang valid | Cobalah |
| .carousel("cycle") | Melewati item korsel dari kiri ke kanan | Cobalah |
| .carousel("pause") | Berhenti korsel akan melalui item | Cobalah |
| .carousel(number) | Pergi ke item tertentu (zero-based: item pertama adalah 0, item kedua adalah 1, dll ..) | Cobalah |
| .carousel("prev") | Pergi ke item sebelumnya | Cobalah |
| .carousel("next") | Pergi ke item berikutnya | Cobalah |
Acara Carousel
Tabel berikut berisi peristiwa carousel semua tersedia.
| Peristiwa | Deskripsi | Cobalah |
|---|---|---|
| slide.bs.carousel | Terjadi ketika carousel adalah tentang untuk meluncur dari satu item ke yang lain | Cobalah |
| slid.bs.carousel | Terjadi ketika korsel telah selesai meluncur dari satu item ke yang lain | Cobalah |
contoh
Keterangan untuk 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 "