Bootstrap carousel (Carousel) widget
Bootstrap carousel (Carousel) plug-in adalah respon fleksibel untuk situs menambahkan cara slider gaya. Selain itu, konten yang cukup fleksibel, mungkin gambar, tertanam bingkai, video atau jenis lain dari konten yang ingin menempatkan.
Jika Anda ingin merujuk pada plug-in fitur individu, Anda perlu referensicarousel.js.Atau, seperti Bootstrap Ikhtisar Plugin bab disebutkan, Anda bisa merujuk kebootstrap.jsatau versi kompresibootstrap.min.js.
contoh
Berikut adalah slide sederhana dengan menggunakan Bootstrap carousel (Carousel) plug-in menunjukkan elemen loop komponen umum. Dalam rangka mencapai rotasi, Anda hanya perlu menambahkan kode dengan tag itu. Tidak perlu menggunakan atribut data, hanya perlu pengembangan berbasis kelas sederhana dapat.
contoh
<Div id = "myCarousel" class = "korsel slide">
<! - Carousel (Carousel) Indeks ->
<Ol class = "korsel-indikator">
<Li Data-target = "#myCarousel" Data-slide-to = "0 " class = "aktif"> </ li>
<Li Data-target = "#myCarousel" Data-slide-to = "1 "> </ li>
<Li Data-target = "#myCarousel" Data-slide-to = "2 "> </ li>
</ Ol>
<! - Carousel (Carousel) Project ->
<Div class = "korsel-batin">
<Div class = "item aktif">
<Img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Pertama slide">
</ Div>
<Div class = "item">
<Img src = "/wp-content/uploads/2014/07/slide2.png" alt = "Kedua slide">
</ Div>
<Div class = "item">
<Img src = "/wp-content/uploads/2014/07/slide3.png" alt = "Ketiga slide">
</ Div>
</ Div>
<! - Carousel (Carousel) Navigasi ->
<A class = "korsel-kontrol kiri" href = "#myCarousel"
Data-slide = "prev"> & lsaquo;
</ A>
<A class = "korsel-kontrol yang tepat" href = "#myCarousel"
Data-slide = "berikutnya"> & rsaquo;
</ A>
</ Div>
Coba »
Hasilnya adalah sebagai berikut:
title opsional
Anda dapat menambahkan teks ke slide dengan elemen.carousel-caption .itemdalam. Hanya Anda harus menempatkan setiap HTML opsional ke tempat itu akan secara otomatis selaras dan diformat. Contoh berikut menggambarkan hal ini:
contoh
<Div id = "myCarousel" class = "korsel slide">
<! - Carousel (Carousel) Indeks ->
<Ol class = "korsel-indikator">
<Li Data-target = "#myCarousel" Data-slide-to = "0 " class = "aktif"> </ li>
<Li Data-target = "#myCarousel" Data-slide-to = "1 "> </ li>
<Li Data-target = "#myCarousel" Data-slide-to = "2 "> </ li>
</ Ol>
<! - Carousel (Carousel) Project ->
<Div class = "korsel-batin">
<Div class = "item aktif">
<Img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Pertama slide">
<Div class = "korsel-caption"> Judul 1 </ div>
</ Div>
<Div class = "item">
<Img src = "/wp-content/uploads/2014/07/slide2.png" alt = "Kedua slide">
<Div class = "korsel-caption"> Judul 2 </ div>
</ Div>
<Div class = "item">
<Img src = "/wp-content/uploads/2014/07/slide3.png" alt = "Ketiga slide">
<Div class = "korsel-caption"> Judul 3 </ div>
</ Div>
</ Div>
<! - Carousel (Carousel) Navigasi ->
<A class = "korsel-kontrol kiri" href = "#myCarousel"
Data-slide = "prev"> & lsaquo;
</ A>
<A class = "korsel-kontrol yang tepat" href = "#myCarousel"
Data-slide = "berikutnya"> & rsaquo;
</ A>
</ Div>
Coba »
Hasilnya adalah sebagai berikut:
pemakaian
- Melalui data atribut: properti data dapat dengan mudah dikendalikan carousel (Carousel) posisi.
- Data atribut-slide menerimaprevkata kunci atau disamping,untuk mengubah posisi slide relatif terhadap posisi saat ini.
- Menggunakandata-slide-untuk lulus pendamping ke slide asli untuk indeks roda, Data-slide-to = "2" akan pindahkan slider ke indeks tertentu, indeks dari 0 sampai mulai menghitung.
- Data-ride = "korsel" atribut yang digunakan untuk menandai rotasi saat halaman dimuat untuk memulai pemutaran film.
- Dengan JavaScript: Carousel (Carousel) dapat dipanggil secara manual melalui JavaScript, sebagai berikut:
$ ( '. Carousel'). Carousel ()
Pilihan
Ada beberapa pilihan melalui atribut data atau JavaScript untuk lulus. Tabel berikut ini berisi opsi ini:
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| interval | number 默认值：5000 | data-interval | 自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。 |
| pause | string 默认值："hover" | data-pause | 鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。 |
| wrap | boolean 默认值：true | data-wrap | 轮播是否连续循环。 |
cara
Berikut adalah beberapa korsel (Carousel) plug-in cara yang berguna:
| 方法 | 描述 | 实例 |
|---|---|---|
| .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') |
contoh
Contoh berikut menunjukkan metode:
contoh
<Div id = "myCarousel" class = "korsel slide">
<! - Carousel (Carousel) Indeks ->
<Ol class = "korsel-indikator">
<Li Data-target = "#myCarousel" Data-slide-to = "0 "
class = "aktif"> </ li>
<Li Data-target = "#myCarousel" Data-slide-to = "1 "> </ li>
<Li Data-target = "#myCarousel" Data-slide-to = "2 "> </ li>
</ Ol>
<! - Carousel (Carousel) Project ->
<Div class = "korsel-batin">
<Div class = "item aktif">
<Img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Pertama slide">
</ Div>
<Div class = "item">
<Img src = "/wp-content/uploads/2014/07/slide2.png" alt = "Kedua slide">
</ Div>
<Div class = "item">
<Img src = "/wp-content/uploads/2014/07/slide3.png" alt = "Ketiga slide">
</ Div>
</ Div>
<! - Carousel (Carousel) Navigasi ->
<A class = "korsel-kontrol kiri" href = "#myCarousel"
Data-slide = "prev"> & lsaquo; </ a>
<A class = "korsel-kontrol yang tepat" href = "#myCarousel"
Data-slide = "berikutnya"> & rsaquo; </ a>
<! - Tombol kontrol ->
<Div style = "text-align: center ;">
<input ketik = "tombol" class = "btn start-slide" value = "Start">
<input ketik = "tombol" class = "btn jeda-slide" value = "Jeda">
<input ketik = "tombol" class = "btn prev-slide" value = "Sebelumnya Slide">
<input ketik = "tombol" class = "btn berikutnya-slide" value = "Slide Next">
<input ketik = "tombol" class = "btn slide-satu" value = "Slide 1">
<input ketik = "tombol" class = "btn slide-dua" value = "Slide 2">
<input ketik = "tombol" class = "btn slide-tiga" value = "Slide 3">
</ Div>
</ Div>
<Script>
$ (Fungsi () {
// Inisialisasi Carousel $ ( ".start-Slide") klik (function () {$ ( "#myCarousel") korsel ( 'siklus') ;.}) ;. // Berhenti rotasi . $ ( ".pause-Slide" ) klik (function () {. $ ( "#myCarousel") Carousel ( 'pause');}); // lingkaran rotasi pada sebuah proyek $ ( ".prev-Slide") klik (function () {$ ( "#myCarousel") korsel ( 'prev') ;.}) ;. // Rotasi siklus ke item berikutnya $ ( ".next-Slide") klik (function () {$ ( "#myCarousel") carousel ( 'berikutnya') ;.}) ;. // loop rotasi ke frame tertentu $ ( ".slide-One") klik. (Function () {$ ( "#myCarousel") carousel (0) ;.}) ;. $ ( ".slide-Two") klik (function () {$ ( "#myCarousel") korsel (1) ;.}); $ ( ".slide-tiga") klik (function () {$ ( "#myCarousel") carousel (2); ..});});
</ Script>
Coba »
Hasilnya adalah sebagai berikut:
peristiwa
Tabel berikut mencantumkan korsel (Carousel) plug-in untuk digunakan dalam acara tersebut. Peristiwa ini dapat digunakan ketika fungsi hook.
| 事件 | 描述 | 实例 |
|---|---|---|
| slide.bs.carousel | 当调用 slide 实例方法时立即触发该事件。 |
$('#identifier').on('slide.bs.carousel', function () {
// 执行一些动作...
})
|
| slid.bs.carousel | 当轮播完成幻灯片过渡效果时触发该事件。 |
$('#identifier').on('slid.bs.carousel', function () {
// 执行一些动作...
})
|
contoh
Contoh berikut menunjukkan penggunaan acara:
contoh
<Div id = "myCarousel" class = "korsel slide">
<! - Carousel (Carousel) Indeks ->
<Ol class = "korsel-indikator">
<Li Data-target = "#myCarousel" Data-slide-to = "0 "
class = "aktif"> </ li>
<Li Data-target = "#myCarousel" Data-slide-to = "1 "> </ li>
<Li Data-target = "#myCarousel" Data-slide-to = "2 "> </ li>
</ Ol>
<! - Carousel (Carousel) Project ->
<Div class = "korsel-batin">
<Div class = "item aktif">
<Img src = "/wp-content/uploads/2014/07/slide1.png" alt = "Pertama slide">
</ Div>
<Div class = "item">
<Img src = "/wp-content/uploads/2014/07/slide2.png" alt = "Kedua slide">
</ Div>
<Div class = "item">
<Img src = "/wp-content/uploads/2014/07/slide3.png" alt = "Ketiga slide">
</ Div>
</ Div>
<! - Carousel (Carousel) Navigasi ->
<A class = "korsel-kontrol kiri" href = "#myCarousel"
Data-slide = "prev"> & lsaquo; </ a>
<A class = "korsel-kontrol yang tepat" href = "#myCarousel"
Data-slide = "berikutnya"> & rsaquo; </ a>
</ Div>
<Script>
$ (Fungsi () {$ ( '#myCarousel'). Pada ( 'slide.bs.carousel', fungsi () {
alert ( "ketika metode geser misalnya dipanggil segera memicu peristiwa.");});});
</ Script>
Coba »
Hasilnya adalah sebagai berikut:
