Artikel ini terutama mempelajari plug -in JavaScript - Carousel. Tanpa basa -basi lagi, kunjungi saja. Tutorial lengkap dapat dilihat: Tutorial Bootstrap 3.0
Korsel
Berikut ini adalah casing korsel yang dibuat oleh plug-in ini dan komponen terkait.
<body> <v id = "carousel-example-generic" data-ride = "carousel"> <!-indikator-> <ol> <li data-target = "#carousel-example-generic" data-slide-to = "0"> </li> <Li-target = "#carousel-example-generik" Data-to-Slide = "1" data-target="#carousel-example-generic" data-slide-to="2"></li></ol> <!-- Wrapper for slides --><div style="text-align:center"><div><img >/img></div><div><img >/img></div><div><img >/img></div><!-- Controls --><a href = "#carousel-example-generic" data-slide = "prev"> <span> </span> </a> <a href = "#carousel-example-generic" data-slide = "next"> <span> </span> </a> </div> <script src = "js/jquery-2.3.3. src = "js/bootstrap.min.js"> </script> <script type = "text/javascript"> // $ ('. carousel'). carousel ('next'); </script> </body>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, Bootstrap tidak bermaksud menggunakan 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.
<div> <mmg>/img> <div> <h4> label thumbnail pertama </h4> <p> cras justo odio, fasilis Dapibus AC, estasas eget quam. Donec id elit non mi porta gravida di Eget Metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> </div> </div>
Tambahkan tiga item, dan kemudian efeknya akan dinilai.
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.
Tambahkan di wadah korsel terluar
<Div id = "carousel-example-generic" data-ride = "carousel">
via JavaScript
Mulai secara manual komponen carousel (di atas kami secara otomatis menyalakan komponen carousel dengan menggunakan properti Data-Ride.):
$ ('. 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
$ (""). Carousel (opsi)
Inisialisasi komponen carousel, terima parameter opsi tipe objek opsional, dan mulai loop slide.
$ ('. Carousel'). Carousel ({Interval: 2000}).carousel ('siklus') loop setiap bingkai dari kiri ke kanan.
.karousel ('jeda') menghentikan korsel.
.carousel (angka) memposisikan korsel ke bingkai yang ditentukan (bingkai subscript dimulai dengan 0, mirip dengan array).
.carousel ('prev') kembali ke bingkai sebelumnya.
.carousel ('Next') pergi ke bingkai berikutnya.
peristiwa
Komponen korsel Bootstrap memperlihatkan dua acara untuk mendengarkan.
$ ('#carousel-example-generic'). on ('slide.bs.carousel', function () {alert (1);})Ini mengikat peristiwa dengan komponen carousel, dan kemudian mengeksekusinya di runtime yang sesuai. Ini banyak dijelaskan di plug-in JavaScript sebelumnya, dan formulirnya semuanya umum, sehingga Anda bisa menggunakannya.
gambar
Ini adalah beberapa plug-in carousel gambar yang lebih praktis, yang memiliki hasil yang sangat baik. Jika digunakan secara wajar, mereka akan selalu menambahkan poin ke halaman Anda. Saya berharap ini akan membantu untuk pembelajaran semua orang.
Jika Anda tidak puas, Anda dapat memeriksa artikel ini untuk studi mendalam: editor "Tutorial Pembelajaran Bootstrap" membuat kemajuan dengan Anda!
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan dua topik menarik kepada Anda:
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.