Cara Menggunakan Gambar Carousel Untuk Bootstrap

Menggunakan komponen karusel dalam bootstrap memerlukan langkah -langkah berikut: Sertakan fail bootstrap; Buat bekas karusel; Tambah tayangan slaid; Sediakan slaid aktif; Tambah kawalan navigasi.

Cara Menggunakan Carousel di Bootstrap

Komponen Carousel Bootstrap membolehkan anda membuat imej atau urutan video secara automatik di laman web. Inilah cara menggunakan Carousel di Bootstrap:

Langkah 1: Sertakan bootstrap

Sertakan fail CSS dan JavaScript Bootstrap di halaman HTML anda:

 <code class="html"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script></code>

Langkah 2: Buat bekas karusel

Buat elemen div sebagai bekas karusel:

 <code class="html"><div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<ul>
<li> Atribut <code>id</code> boleh menjadi unik dan digunakan untuk merujuk karusel.</li>
<li> Kelas <code>carousel slide</code> bermakna ini adalah karusel.</li>
<li> Harta <code>data-bs-ride="carousel"</code> membolehkan main balik karusel automatik.</li>
</ul>
<p> <strong>Langkah 3: Tambahkan slaid</strong></p>
<p> Di dalam bekas, buat slaid menggunakan elemen <code>div</code> :</p>
<pre class="brush:php;toolbar:false"> <code class="html"><div class="carousel-inner"> <!-- 添加幻灯片--> </div></code>

<li> Setiap slaid harus mengandungi imej atau video bersama -sama dengan tajuk dan keterangan (pilihan).

Langkah 4: Sediakan tayangan slaid aktif

Gunakan kelas active untuk menetapkan slaid pertama sebagai slaid aktif:

 <code class="html"><div class="carousel-item active"> <!-- 幻灯片内容--> </div></code>

Langkah 5: Tambahkan kawalan navigasi

Gunakan butang anak panah dan pager untuk menambah kawalan navigasi untuk karusel:

 <code class="html"><button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> <ol class="carousel-indicators"> <!-- 添加分页器--> </ol></code>

<li> Ciri-ciri data-bs-target dan data-bs-slide anak panah disambungkan ke bekas karusel. <li> Tambah elemen <li> dalam pager untuk setiap slaid.

Penyesuaian dan pilihan

Anda boleh lagi menyesuaikan karusel, seperti menetapkan selang karusel, mengubah penampilan kawalan navigasi, dan lain -lain. Untuk maklumat lanjut mengenai pilihan dan penyesuaian yang tersedia, rujuk dokumentasi Bootstrap.