Membuat Gambar Slider Menggunakan Bootstrap

5/5 (3)

Membuat Gambar Slider Menggunakan Bootstrap – Gambar slider, carousel atau lebih sering disebut slideshow adalah bagian yang termasuk banyak digunakan pada website – website sekarang. Biasanya carousel dibuat untuk memasarkan atau menampilkan produk unggulan dari website tersebut.

Baca juga: 10 Text Editor Terbaik Yang Bikin Kamu Semangat Ngoding !

Seperti yang kita tahu, cukup sulit untuk membuat gambar slider dengan cara manual, namun semua berubah ketika Bootstrap menyerang😌.

Membuat Gambar Slider Menggunakan Bootstrap

Sekarang kita mulai membuat carousel menggunakan Bootstrap. Pertama, kita butuh gambar yang akan kita tampilkan di carousel nanti. Lalu buat file HTML dan paste kan kode berikut,

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Belajar Membuat Slider</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Panggil Bootstrap -->
  <style>
  .carousel-inner img {
      width: 100%;
      height: 100%;
  }
  </style>
</head>
<body>

<div id="demo" class="carousel slide col-md-8" data-ride="carousel">

  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  <!-- Ganti gambar dengan file gambar kalian -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="gambar1.jpg" width="500" height="300">
    </div>
    <div class="carousel-item">
      <img src="gambar2.jpg" width="500" height="300">
    </div>
    <div class="carousel-item">
      <img src="gambar3.jpg" width="500" height="300">
    </div>
  </div>
  
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>
<h1>Membuat Gambar Slider | codelatte.org</h1>
</body>
</html>

Hasilnya akan menjadi seperti ini,
Membuat Gambar Slider Menggunakan Bootstrap
Membuat Gambar Slider Menggunakan Bootstrap

Kita juga bisa memberi caption pada slider, cukup tambahkan kode berikut,

<div class="carousel-item">
  <img src="gambar1.jpg" alt="Los Angeles">
  <div class="carousel-caption">
    <h3>Gambar pertama</h3>
    <p>Contoh caption pada slide pertama.</p>
  </div>
</div>

Hasilnya bisa kalian lihat disini,

See the Pen Carousel Bootstrap | codelatte.org by Abay (@abaykan) on CodePen.

Cukup mudah? Atau masih bingung? Jika ada pertanyaan, jangan sungkan untuk bertanya melalui kolom komentar. Semoga bermanfaat dan sampai jumpa pada artikel selanjutnya.

Please rate this

Abay

Cheers, I am Abay and I make things for fun. Gudang Garam and Coffee i can't live without. I love turning exciting ideas into horrible code. And .. i'm a lil' boy currently living Indonesia. Want to buy me a coffe? Let's talk, abay@codelatte.org

Satu tanggapan untuk “Membuat Gambar Slider Menggunakan Bootstrap

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *