Cara membuat karusel bootstrap

Untuk membuat graf karusel bootstrap, lakukan langkah -langkah berikut: Buat bekas induk dengan kelas Carousel. Tambah slaid, gunakan kelas Carousel-Item untuk menambah kelas aktif ke slaid pertama. (Pilihan) Tambah penunjuk untuk menambah elemen OL dengan kelas penunjuk karusel di dalam bekas. (Pilihan) Tambah kawalan, tambah butang dengan kelas Carousel-Control-PREV dan Kelas-Control-Control dalam bekas. (Pilihan) Mulakan graf karusel dengan JavaScript untuk membolehkan autoplay, pemasa, dan petunjuk.

Cara membuat karusel bootstrap

Carousel adalah koleksi imej atau slaid yang dipaparkan secara automatik dalam selang waktu yang ditentukan. Bootstrap menyediakan kelas mudah yang membolehkan anda membuat gambar rajah karusel dengan mudah di laman web.

Langkah 1: Buat bekas

Buat bekas induk dengan kelas carousel :

 <code class="html"><div class="carousel">
<p> <strong>Langkah 2: Tambahkan slaid</strong></p>
<p> Tambah slaid di dalam bekas, gunakan kelas <code>carousel-item</code> :</p>
<pre class="brush:php;toolbar:false"> <code class="html"><div class="carousel-item active"> <img src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="Image 1"> </div> <div class="carousel-item"> <img src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="Image 2"> </div></code>

Tambah kelas active ke slaid pertama dan ia akan dipaparkan sebagai slaid awal.

Langkah 3: Tambah Penunjuk (Pilihan)

Penunjuk memaparkan slaid semasa dan berpotensi dalam rajah karusel. Tambahkan elemen ol dengan kelas carousel-indicators di dalam bekas:

 <code class="html"><ol class="carousel-indicators"> <li data-target=".carousel" data-slide-to="0" class="active"> <li data-target=".carousel" data-slide-to="1"> </ol></code>

Langkah 4: Tambah Kawalan (pilihan)

Kawalan membolehkan pengguna untuk menavigasi gambarajah karusel secara manual. Tambah butang dengan kelas carousel-control-prev dan Kelas carousel-control-next di dalam bekas:

 <code class="html"><a class="carousel-control-prev" href=".carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">上一张</span> </a> <a class="carousel-control-next" href=".carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">下一张</span> </a></code>

Langkah 5: Mulakan peta karusel (pilihan)

Mulakan graf karusel dengan JavaScript untuk membolehkan autoplay, pemasa, dan petunjuk.

 <code class="javascript">$('.carousel').carousel({ interval: 5000 // 自动播放的间隔时间（毫秒） });</code>

Selesai

Langkah -langkah ini mewujudkan karusel bootstrap responsif dengan autoplay, petunjuk, dan kawalan.