Belajar Bootstrap: 3. Membuat Slider atau Carousel

Belajar Bootstrap: 3. Membuat Slider atau Carousel - Okay pada pembelajaran ke 3 di Bootstrap ini, kita akan belajar membuat slider. Apa itu slider? slider adalah gambar atau text bergerak ke samping dan biasanya kita jumpai pada section awal di sebuah website contohnya seperti ini:

Contoh slider/carousel

Nah gambar di atas adalah contoh slider dari salah satu marketplace terbesar di indonesia. Untuk membuat yang seperti itu di bootsrap sudah ada namanya carousel. Oke langsung saja ke cara membuat carousel di bootsrap.

Disini kita melanjurkan seri ke  2 yang sebelumnya kita sudah membuat responsive menu, jadi dibawahnya tinggal kita tambahkan kode berikut:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Jakarta_bajaj.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://source.unsplash.com/random" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://upload.wikimedia.org/wikipedia/commons/1/14/Gas_Fuelled_Bajaj_in_Jakarta.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Penjelasan, disini kita memakai carousel bootstrap yang mana mencari class carousel, lalu untuk navigasinya (next dan prevnya) disini kita mencari id bernama carouselExampleControls sehingga kita bisa mengklik next ataupun prev.

Jika kalian ingin menambahkan teks di slidernya bisa juga dengan menambahkanya setelah image, kurang lebih kodenya jadi seperti ini:

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Nah simpan projectnya lalu kembali ke browser dan refresh.

Untuk demo codenya ada di codepen saya : https://codepen.io/egiesem/pen/QWEdPGN

Semoga bermanfaat!