Bootstrap Carousel Plug-in adalah cara yang fleksibel dan responsif untuk menambahkan slider ke situs Anda. Selain itu, kontennya cukup fleksibel untuk menjadi gambar, bingkai tertanam, video, atau jenis konten lain yang ingin Anda tempatkan.
Jika Anda ingin merujuk fungsionalitas plugin secara terpisah, maka Anda perlu merujuk carousel.js. Atau, sebagaimana disebutkan dalam bab ikhtisar plugin Bootstrap , Anda dapat merujuk ke bootstrap.js atau versi terkompresi bootstrap.min.js.
1. Contoh
Di bawah ini adalah slide sederhana yang menunjukkan komponen umum dari elemen looping menggunakan plugin Bootstrap Carousel. Untuk mengimplementasikan Carousel, Anda hanya perlu menambahkan kode dengan tanda itu. Tidak perlu menggunakan atribut data, hanya pengembangan berbasis kelas sederhana.
<! Doctype html> <html> <head> <title> bootstrap instance- Plug-in carousel sederhana </iteme> <link href = "/bootstrap/css/bootstrap.min.min.css" rel = "stylesheet"> <cript src = "/scripts/jQuery.min.min.min" src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <v id = "mycarousel"> <!-indikator carousel-> <ol> <li data-target = "#li-targerel" li-targerel " Data-target = "#mycarousel" data-slide-to = "2"> </li> </l> <!-Proyek Carousel-> <div> <img src = "/media/unggah/2014/07/slide1.png"> </div> <v> <img src = "/media/2014/2014 src = "/media/unggah/2014/07/slide3.png"> </div> </div> <!-navigasi carousel-> <a href = "#mycarousel" data-slide = "prev"> ‹</a> <a href = "#mycarousel" data-slide = "NEXT"> </A/A/A/A/A/A/A/A NEXT> </a/a next "
Hasilnya adalah sebagai berikut:
Plugin korsel sederhana
2. Judul opsional
Anda dapat menambahkan judul ke slide melalui elemen .Carousel-caption di dalam .item. Tempatkan saja HTML opsional di sana dan itu akan secara otomatis disejajarkan dan diformat. Contoh berikut menunjukkan ini:
<! Doctype html> <html> <head> <title> Bootstrap Instance - Judul plug -in carousel </iteme> <tautan href = "/bootstrap/css/bootstrap.min.min.css" rel = "stylesheet"> <cript src = "/scripts/jQuery.min.min.min.min" src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <v id = "mycarousel"> <!-indikator carousel-> <ol> <li data-target = "#li-targerel" li-targerel " Data-target = "#mycarousel" data-slide-to = "2"> </li> </l> <!-Proyek Carousel-> <div> <img src = "/media/unggah/2014/07/slide1.png"> <v> Title 1 </Div> </Div> <Div> <IMG SRC = "/07 MODA/07 MEDI/07/0 <div> Judul 2 </div> </div> <div> <img src = "/media/unggah/2014/07/slide3.png"> <verv> Judul 3 </div> </div> </div> <!-navigasi carousel-> <a href = "#mycarousel" data-slide = "Prev"> "Prev"> "#"#"#"#""#""#""#""#""#""#""#""#""#""#""#""#""#""#""#""#""#""#""#""#""#""#""#""#""#""#""#""#" data-slide = "next"> ›</a> </div> </body> </html>
Hasilnya adalah sebagai berikut:
Judul Plugin Carousel
3. Penggunaan
Melalui atribut data: Menggunakan atribut data, mudah untuk mengontrol posisi korsel.
Slide data properti menerima kata kunci sebelumnya atau di sebelah mengubah posisi slide relatif terhadap posisi saat ini.
Gunakan data-slide-ke untuk indeks geser mentah ke bagian bawah tempat tidur korsel. Data-slide-to = "2" akan memindahkan slider ke indeks tertentu, dan indeks menghitung dari 0.
Properti Data-Ride = "Carousel" digunakan untuk menandai carousel yang memulai pemutaran animasi saat halaman dimuat.
Melalui JavaScript: Carousel dapat disebut secara manual melalui JavaScript, seperti yang ditunjukkan di bawah ini:
$ ('. Carousel'). Carousel ()
4. Opsi
Ada beberapa opsi yang melewati properti data atau javascript. Tabel berikut mencantumkan opsi ini:
V. Metode
Berikut adalah beberapa metode yang berguna dalam plug-in carousel:
Vi. Contoh
Contoh berikut menunjukkan penggunaan metode:
<! Doctype html> <html> <head> <title> Bootstrap Instance - Metode plug -in carousel </iteme> <tautan href = "/bootstrap/css/bootstrap.min.min.css" rel = "stylesheet"> <cript src = "/scripts/jQuery.min.min.min" src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <v id = "mycarousel"> <!-indikator carousel-> <ol> <li data-target = "#li-targerel" li-targerel " Data-target = "#mycarousel" data-slide-to = "2"> </li> </l> <!-Proyek Carousel-> <div> <img src = "/media/unggah/2014/07/slide1.png"> </div> <v> <img src = "/media/2014/2014 src = "/media/unggah/2014/07/slide3.png"> </div> </div> <!-navigasi carousel-> <a href = "#mycarousel" data-slide = "prev"> ‹</a> <a href = "#mycarousel" data-slide = "NEXT"> <a href = "#controlyel" Data-slide = "NEXT"> <a href = "#controle" Data-slide = "next"> <a href = " style="text-align:center;"> <input type="button" value="Start"> <input type="button" value="Pause"> <input type="button" value="Previous Slide"> <input type="button" value="Next Slide"> <input type="button" value="Slide 1"> <input type="button" value="Slide 2"> <input type="button" value="Slide 3"> </div> </div> <script> $ (function () {// inisialisasi carousel $ (". start-slide"). klik (function () {$ ("#mycarousel"). carousel ('siklus');}); // hentikan carousel $ (". }); // Hentikan carousel $ (". $ (". Next-Slide"). Klik (function () {$ ("#MyCarousel"). Carousel ('NEXT');}); "#MyCarousel"). Carousel (1); }); </script> </body> </html>Hasilnya adalah sebagai berikut:
Metode plug-in carousel
7. Acara
Tabel berikut mencantumkan peristiwa yang akan digunakan di plug-in Carousel. Acara ini dapat digunakan sebagai pengait dalam fungsi.
Contoh
Contoh berikut menunjukkan penggunaan peristiwa:
<! Doctype html> <html> <head> <title> bootstrap instance- carousel plug-in event </title> <link href = "/bootstrap/css/bootstrap.min.min.css" rel = "stylesheet"> <cript src = "/scripts/jQuery.min.min.min" src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <v id = "mycarousel"> <!-metrik carousel-> <ol> <li data-target = "#" li-targerel "lionel" liatel " Data-target = "#mycarousel" data-slide-to = "2"> </li> </l> <!-Proyek Carousel-> <div> <img src = "/media/unggah/2014/07/slide1.png"> </div> <v> <img src = "/media/2014/2014 src = "/media/unggah/2014/07/slide3.png"> </div> </div> <!-navigasi carousel-> <a href = "#mycarousel" data-slide = "prev"> ‹</a> <a href = "#mycarousel" data-slide = "next"> <a href = "#mycarousel" data-slide = "NEXT"> {a href = " $ ('#MyCarousel'). ON ('Slide.bs.Carousel', function () {alert ("Flash acara segera ketika metode instance slide dipanggil.");}); }); </script> </body> </html>Hasilnya adalah sebagai berikut:
Acara plugin korsel
Menurut tutorial di atas, saya membuat contoh saya sendiri:
Plug-in Carousel memainkan beberapa gambar besar dengan ukuran yang sama secara berurutan.
// Contoh Dasar. <Div id = "mycarousel"> <ol> <li data-target = "#mycarousel" data-slide-to = "0"> </li> <li data-target = "#mycarousel" data-slide-to = "1"> </li> <Li-target = "#Mycarousel" Data-slide-to = " src="img/slide1.png"> </div> <div> <img src="img/slide2.png"> </div> <div> <img src="img/slide2.png"> </div> <div> <img src="img/slide3.png"> </div> <a href="#myCarousel" data-slide = "prev"> ‹</a> <a href = "#mycarousel" data-slide = "next"> ›</a> </div>
Penjelasan Atribut Data:
1.Data-Slide menerima kata kunci sebelumnya atau di sebelah mengubah posisi slide relatif ke posisi saat ini;
2.Data-Slide-to membuat indeks geser asli ke bagian bawah korsel. Data-slide-to = "2" akan memindahkan slider ke indeks tertentu, dan indeks menghitung dari 0.
3.Data-ride = "Carousel" Atribut Tag Pengguna Carousel memulai pemutaran animasi saat halaman dimuat.
Jika Anda menyebutnya di JavaScript, gunakan metode pasangan nilai kunci secara langsung dan hapus data-;
// Atur properti khusus
$ ('#MyCarousel'). Carousel ({// Tetapkan interval pemutaran otomatis/2 detik: 2000, // atur pause acara: 'hover', // mainkan hanya sekali bungkus: false,});Plugin Carousel juga menyediakan beberapa metode, sebagai berikut:
// Klik tombol untuk mengeksekusi $ ('tombol'). On ('klik', function () {// Setelah mengklik, $ ('#mycarousel'). Carousel ('siklus'); // serupa lainnya});peristiwa
$ ('#mycarousel'). on ('slide.bs.carousel', function () {waspada ('gratis segera ketika mode instance slide dipanggil');}); $ ('#mycarousel'). on ('slid.bs.carousel', function () {waspada ('gratis ketika carousel menyelesaikan slide');});Untuk konten lainnya, silakan merujuk ke: Tutorial Pembelajaran Bootstrap
Di atas adalah semua tentang artikel ini. Saya harap akan sangat membantu bagi semua orang untuk mempelajari plug-in carousel bootstrap.