Penjelasan terperinci tentang plug-in JS dari kasus efek korsel Bootstrap

Bootstrap adalah kerangka kerja front-end untuk pengembangan cepat aplikasi dan situs web Web. Bootstrap didasarkan pada HTML, CSS, dan JavaScript.

Kasus

Berikut ini adalah casing korsel yang dibuat oleh plug-in ini dan komponen terkait.

 <Div id = "carousel-example-generic" data-ride = "carousel"> <!-indikator-> <ol> <li data-target = "#carousel-example-generic" data-slide-to = "0"> </li> <li data-target = "#carousel-example-generik" data-slide-to = " Data-target = "#carousel-example-generic" data-slide-to = "2"> </li> </ol> <!-wrapper untuk slide-> <div> <div> <img src = "..."> <Div> ... </div> </Div> </Div> <!-kontrol-> <a href = "#careric- ... Data-slide = "prev"> <span> </span> </a> <a href = "#carousel-example-generic" data-slide = "next"> <span> </span> </a> </div>

Internet Explorer 8 & 9 tidak mendukung efek animasi transisi

Bootstrap mengimplementasikan efek animasi berdasarkan CSS3, tetapi Internet Explorer 8 & 9 tidak mendukung properti CSS yang diperlukan ini. Oleh karena itu, efek animasi transisi akan hilang saat menggunakan kedua browser. Selain itu, kami tidak bermaksud menggunakan implementasi fungsi alternatif berbasis jQuery.

Opsi opsional

Dalam .item apa saja, Anda dapat menambahkan .karousel-caption ke setiap slide. Anda juga dapat menambahkan kode HTML apa pun, yang akan diatur dan diformat secara otomatis.

900x500

 <div> <img src = "..."> <viv> <h3> ... </h3> <p> ... </p> </div> </div>

Masalah aksesibilitas

Komponen korsel tidak kompatibel dengan standar aksesibilitas. Jika diperlukan kompatibilitas, pertimbangkan opsi lain untuk menyajikan slide.

penggunaan

Melalui atribut data

Atribut data dapat dengan mudah mengontrol penentuan posisi korsel. Data-slide dapat menerima kata kunci PREV atau berikutnya yang mengontrol posisi pemutaran. Selain itu, subskrip slide yang dimulai dengan 0 juga dapat dilewatkan melalui data-slide-to.

Atribut Data-Ride = "Carousel" digunakan untuk menandai komponen carousel yang dimulai setelah halaman dimuat.

via JavaScript

Mulai secara manual komponen korsel:

Salinan kode adalah sebagai berikut:

$ ('. Carousel'). Carousel ()

Opsi

Opsi dapat dilewati melalui properti data atau JavaScript. Untuk atribut data, Anda perlu meletakkan nama opsi setelah data-, misalnya data-interval = "".

metode

.karousel (opsi)

Inisialisasi komponen carousel, terima parameter opsi tipe objek opsional, dan mulai loop slide.

 $ ('. Carousel'). Carousel ({interval: 2000}). Carousel ('siklus')

Siklus setiap bingkai dari kiri ke kanan.

.carousel ('jeda')

Hentikan korsel.

.carousel (angka)

Posisikan korsel ke bingkai yang ditentukan (bingkai subskrip dimulai dengan 0, mirip dengan array).

.carousel ('prev')

Kembali ke bingkai sebelumnya.

.carousel ('berikutnya')

Pergi ke bingkai berikutnya.

peristiwa

Komponen korsel Bootstrap memperlihatkan dua acara untuk mendengarkan.

 $ ('#mycarousel'). on ('slide.bs.carousel', function () {// lakukan sesuatu ...})

Di atas adalah penjelasan terperinci dari kasus Bootstrap Carousel Effect berdasarkan plug-in JS yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda!