Bootstrap 4 - 04.2: Image Slide

Kali ini Rumah Code akan membahas tentang image slide (Carousel) pada bootstrap 4. 

Image Slide (Carousel)

Berikut ini adalah contoh penggunaan carousel pada bootstrap 4

1.  
2.  
3.  

 

Slide pertama

ini adalah slide pertama

 

Slide Kedua

ini adalah Slide Kedua

 

Slide Ketiga

ini adalah Slide ketiga

Previous Next

Penjelasan tentang image carousel

1. Pendiefinisan tag image slide menggunakan class carousel slide.

   
   ​
   <div id="contoh-carousel" class="carousel slide carousel-fade" data-ride="carousel">​</div>
   

2. Indikator menggunakan class carousel-indicators.

   
   <ol class="carousel-indicators">
   <li class="active" data-target="#contoh-carousel" data-slide-to="0"> </li>
   <li data-target="#contoh-carousel" data-slide-to="1"> </li>
   <li data-target="#contoh-carousel" data-slide-to="2"> </li>
   </ol>
   

3. List dari gambar yang akan di slide di defniskan dengan menggunakan class carousel-inner dan untuk item nya menggunakan carousel-item.

   
   <div class="carousel-inner" role="listbox">
   <div class="carousel-item active">
   <div class="view"><img class="d-block w-100" src="https://www.rumahcode.org/img/code/kbootstrap.jpg" alt="slide Pertama" />
   <div class="mask rgba-black-light"> </div>
   </div>
   <div class="carousel-caption">
   <h3 class="h3-responsive">Slide pertama</h3>
   <p>ini adalah slide pertama</p>
   </div>
   </div>
   <div class="carousel-item"><!--Mask color-->
   <div class="view"><img class="d-block w-100" src="https://www.rumahcode.org/img/code/kcodeigniter.jpg" alt="slide kedua" />
   <div class="mask rgba-black-strong"> </div>
   </div>
   <div class="carousel-caption">
   <h3 class="h3-responsive">Slide Kedua</h3>
   <p>ini adalah Slide Kedua</p>
   </div>
   </div>
   <div class="carousel-item"><!--Mask color-->
   <div class="view"><img class="d-block w-100" src="https://www.rumahcode.org/img/code/kssh.jpg" alt="Slide ketiga" />
   <div class="mask rgba-black-slight"> </div>
   </div>
   <div class="carousel-caption">
   <h3 class="h3-responsive">Slide Ketiga</h3>
   <p>ini adalah Slide ketiga</p>
   </div>
   </div>
   </div>
   ​

4. Untuk memberikan tulisan / caption pada carusel menggunakan class carousel-caption.
5. sedangkan untuk memberikan tombol nafigasi ke gambar sebelum nya dan selanjutnya menggunakan class carousel-control-prev dan carousel-control-next.

     
   <a class="carousel-control-prev" role="button" href="#contoh-carousel" data-slide="prev"> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" role="button" href="#contoh-carousel" data-slide="next"> <span class="sr-only">Next</span> </a></div>
     ​

6. Berikut ini source code full nya dari carousel image slide.

   
   <div id="contoh-carousel" class="carousel slide carousel-fade" data-ride="carousel"><!--Indicators-->
   <ol class="carousel-indicators">
   <li class="active" data-target="#contoh-carousel" data-slide-to="0"> </li>
   <li data-target="#contoh-carousel" data-slide-to="1"> </li>
   <li data-target="#contoh-carousel" data-slide-to="2"> </li>
   </ol>
   <div class="carousel-inner" role="listbox">
   <div class="carousel-item active">
   <div class="view"><img class="d-block w-100" src="https://www.rumahcode.org/img/code/kbootstrap.jpg" alt="slide Pertama" />
   <div class="mask rgba-black-light"> </div>
   </div>
   <div class="carousel-caption">
   <h3 class="h3-responsive">Slide pertama</h3>
   <p>ini adalah slide pertama</p>
   </div>
   </div>
   <div class="carousel-item"><!--Mask color-->
   <div class="view"><img class="d-block w-100" src="https://www.rumahcode.org/img/code/kcodeigniter.jpg" alt="slide kedia" />
   <div class="mask rgba-black-strong"> </div>
   </div>
   <div class="carousel-caption">
   <h3 class="h3-responsive">Slide Kedua</h3>
   <p>ini adalah Slide Kedua</p>
   </div>
   </div>
   <div class="carousel-item"><!--Mask color-->
   <div class="view"><img class="d-block w-100" src="https://www.rumahcode.org/img/code/kssh.jpg" alt="Slide ketiga" />
   <div class="mask rgba-black-slight"> </div>
   </div>
   <div class="carousel-caption">
   <h3 class="h3-responsive">Slide Ketiga</h3>
   <p>ini adalah Slide ketiga</p>
   </div>
   </div>
   </div>
   <a class="carousel-control-prev" role="button" href="#contoh-carousel" data-slide="prev"> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" role="button" href="#contoh-carousel" data-slide="next"> <span class="sr-only">Next</span> </a></div>
   

7. jika masih bingung silahkan lihat contoh imge carousel di code pen nya nya Rumah code