Edit Component

<div class="container">
  <h2 class="mb-4">Contoh Image Carousel dengan Style Bootstrap</h2>

<div class="card demo-card">
    <div class="card-body">
      <h5 class="card-title">1. Carousel Dasar (Indikator + Panah)</h5>
      <div id="carousel1" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carousel1" data-bs-slide-to="0" class="active"></button>
          <button type="button" data-bs-target="#carousel1" data-bs-slide-to="1"></button>
          <button type="button" data-bs-target="#carousel1" data-bs-slide-to="2"></button>
        </div>
        <div class="carousel-inner rounded">
          <div class="carousel-item active">
            <img src="https://picsum.photos/id/1015/1200/500" class="d-block w-100" alt="Slide 1">
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/id/1016/1200/500" class="d-block w-100" alt="Slide 2">
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/id/1018/1200/500" class="d-block w-100" alt="Slide 3">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carousel1" data-bs-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carousel1" data-bs-slide="next">
          <span class="carousel-control-next-icon"></span>
        </button>
      </div>
    </div>
  </div>

<div class="card demo-card">
    <div class="card-body">
      <h5 class="card-title">2. Carousel dengan Caption Teks</h5>
      <div id="carousel2" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carousel2" data-bs-slide-to="0" class="active"></button>
          <button type="button" data-bs-target="#carousel2" data-bs-slide-to="1"></button>
          <button type="button" data-bs-target="#carousel2" data-bs-slide-to="2"></button>
        </div>
        <div class="carousel-inner rounded">
          <div class="carousel-item active">
            <img src="https://picsum.photos/id/1019/1200/500" class="d-block w-100" alt="Slide 1">
            <div class="carousel-caption d-none d-md-block">
              <h5>Produk Unggulan</h5>
              <p>Deskripsi singkat produk pertama ada di sini.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/id/1024/1200/500" class="d-block w-100" alt="Slide 2">
            <div class="carousel-caption d-none d-md-block">
              <h5>Promo Spesial</h5>
              <p>Diskon terbatas untuk minggu ini saja.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/id/1025/1200/500" class="d-block w-100" alt="Slide 3">
            <div class="carousel-caption d-none d-md-block">
              <h5>Testimoni Pelanggan</h5>
              <p>Kata mereka yang sudah mencoba layanan kami.</p>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carousel2" data-bs-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carousel2" data-bs-slide="next">
          <span class="carousel-control-next-icon"></span>
        </button>
      </div>
    </div>
  </div>

<div class="card demo-card">
    <div class="card-body">
      <h5 class="card-title">3. Carousel dengan Efek Fade</h5>
      <div id="carousel3" class="carousel slide carousel-fade" data-bs-ride="carousel">
        <div class="carousel-inner rounded">
          <div class="carousel-item active">
            <img src="https://picsum.photos/id/1035/1200/500" class="d-block w-100" alt="Slide 1">
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/id/1039/1200/500" class="d-block w-100" alt="Slide 2">
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/id/1043/1200/500" class="d-block w-100" alt="Slide 3">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carousel3" data-bs-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carousel3" data-bs-slide="next">
          <span class="carousel-control-next-icon"></span>
        </button>
      </div>
    </div>
  </div>

<div class="card demo-card">
    <div class="card-body">
      <h5 class="card-title">4. Carousel Manual (Tanpa Auto-slide)</h5>
      <div id="carousel4" class="carousel slide">
        <div class="carousel-inner rounded">
          <div class="carousel-item active">
            <img src="https://picsum.photos/id/1050/1200/500" class="d-block w-100" alt="Slide 1">
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/id/1051/1200/500" class="d-block w-100" alt="Slide 2">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carousel4" data-bs-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carousel4" data-bs-slide="next">
          <span class="carousel-control-next-icon"></span>
        </button>
      </div>
      <small class="text-muted">Tanpa <code>data-bs-ride="carousel"</code> artinya slide tidak jalan otomatis, hanya lewat tombol panah.</small>
    </div>
  </div>

<div class="card demo-card">
    <div class="card-body">
      <h5 class="card-title">5. Carousel dengan Indikator Thumbnail</h5>
      <div id="carousel5" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner rounded">
          <div class="carousel-item active">
            <img src="https://picsum.photos/id/1060/1200/500" class="d-block w-100" alt="Slide 1">
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/id/1069/1200/500" class="d-block w-100" alt="Slide 2">
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/id/1074/1200/500" class="d-block w-100" alt="Slide 3">
          </div>
        </div>
        <div class="carousel-indicators thumb-indicators">
          <button type="button" data-bs-target="#carousel5" data-bs-slide-to="0" class="active"
            style="background-image:url('https://picsum.photos/id/1060/100/60')"></button>
          <button type="button" data-bs-target="#carousel5" data-bs-slide-to="1"
            style="background-image:url('https://picsum.photos/id/1069/100/60')"></button>
          <button type="button" data-bs-target="#carousel5" data-bs-slide-to="2"
            style="background-image:url('https://picsum.photos/id/1074/100/60')"></button>
        </div>
      </div>
    </div>
  </div>

<div class="card demo-card">
    <div class="card-body">
      <h5 class="card-title">6. Carousel Multi-Item (3 Gambar Sekaligus)</h5>
      <div id="carousel6" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner rounded">
          <div class="carousel-item active">
            <div class="row g-2">
              <div class="col-4"><img src="https://picsum.photos/id/1080/400/250" class="w-100 rounded" style="height:180px;object-fit:cover;"></div>
              <div class="col-4"><img src="https://picsum.photos/id/1084/400/250" class="w-100 rounded" style="height:180px;object-fit:cover;"></div>
              <div class="col-4"><img src="https://picsum.photos/id/1084/400/251" class="w-100 rounded" style="height:180px;object-fit:cover;"></div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="row g-2">
              <div class="col-4"><img src="https://picsum.photos/id/110/400/250" class="w-100 rounded" style="height:180px;object-fit:cover;"></div>
              <div class="col-4"><img src="https://picsum.photos/id/111/400/250" class="w-100 rounded" style="height:180px;object-fit:cover;"></div>
              <div class="col-4"><img src="https://picsum.photos/id/112/400/250" class="w-100 rounded" style="height:180px;object-fit:cover;"></div>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carousel6" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" style="filter: invert(1);"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carousel6" data-bs-slide="next">
          <span class="carousel-control-next-icon" style="filter: invert(1);"></span>
        </button>
      </div>
      <small class="text-muted">Trik: tiap "item" berisi <code>row</code> dengan beberapa gambar sekaligus — cocok untuk galeri produk/directory listing.</small>
    </div>
  </div>

<div class="card demo-card">
    <div class="card-body">
      <h5 class="card-title">7. Carousel Dark Variant</h5>
      <div id="carousel7" class="carousel slide carousel-dark" data-bs-ride="carousel">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carousel7" data-bs-slide-to="0" class="active"></button>
          <button type="button" data-bs-target="#carousel7" data-bs-slide-to="1"></button>
        </div>
        <div class="carousel-inner rounded">
          <div class="carousel-item active">
            <img src="https://picsum.photos/id/1015/1200/500" class="d-block w-100" alt="Slide 1">
            <div class="carousel-caption d-none d-md-block">
              <h5>Tema Gelap</h5>
              <p>Kontrol & indikator otomatis kontras dengan latar terang.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://picsum.photos/id/1016/1200/500" class="d-block w-100" alt="Slide 2">
            <div class="carousel-caption d-none d-md-block">
              <h5>Cocok untuk Background Terang</h5>
              <p>Class <code>carousel-dark</code> membalik warna kontrol.</p>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carousel7" data-bs-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carousel7" data-bs-slide="next">
          <span class="carousel-control-next-icon"></span>
        </button>
      </div>
    </div>
  </div>

</div>

Live Preview