Bootstrap 4 - 04.2: Image Slide

Bootstrap 4 - 04.2: Image Slide

loading....

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

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

Artikel Menarik Lainnya
Bootstrap, Bootstrap 4

loading...