Sebelumnya kita telah membahas mengenai bagaimana cara membuat card untuk postingan, isi postingan, dan kebutuhan lainnya dalam membuat website. Kali ini kita masih dalam seri tutorial belajar bootstrap 4 untuk pemula yaitu mengenai bagaimana cara membuat carousel.
Apa itu carousel ?
Carousel pada bootstrap 4 merupakan sebuah tampilan slideshow dari beberapa gambar atau video yang bisa kamu geser ke kiri, kanan, atas maupun bawah dengan transisi yang menarik dan keren.
Biasanya carousel sendiri terdiri dari first slide, second slide, dan third slide. Namun, kamu juga bisa menambahkan beberapa slide lagi sesuai keinginan kamu.
Carousel sendiri kebanyakan digunakan oleh web developer dan designer untuk website atau blog company profile.
Untuk itu berikut ini cara membuat carousel.
Cara Membuat Carousel di Bootstrap 4
ada beberapa jenis carousel yang terdapat pada framework css bootstrap 4 kamu bisa menggunakan salah satu jenis berikut sesuai kebutuhan kamu.
Jangan lupa persiapan awal kita ya : Tutorial Belajar Bootstrap 4 Untuk Pemula #1 : Pengenalan dan Cara Install
Carousel hanya slide
Pertama ada carousel yan tidak memiliki tanda panah atau atribut lain didalamnya jadi hanya slide nya saja. tampilannya seperti ini :
Tetapi tenang saja kamu juga bisa melihat transisi antar beberapa slide jika slide tersebut berganti secara otomatis.
Copy script dibawah ini :
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>Carousel dengan Kontrol
ada juga juga jenis carousel dengan kontrol yang bisa kamu gunakan untuk mengontrol atau memindahkan antar slide atau gambar secara langsung menggunakan kontrol pada carousel tersebut.
Berikut contoh carousel dengan kontrol
Dan scriptnya seperti ini :
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." 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>Carousel dengan kontrol dan indikator
jika sebelumnya jenis carousel tanpa atribut lainnya dan carousel hany dengan kontrol. kali ini jenis carousel yang cukup komplek atau lengkap yang terdiri dari kontrol dan indikatornya.
Berikut carousel dengan kontrol dan indikator
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Carousel dengan kontrol, indikator dan caption
yang ini lebih kompleks lagi karena di tambahkan caption yang bisa kamu gunakan untuk postingan jadi isi caption tersebut bisa diisi dengan kutipan atau excerpt dari isi konten dari postingan tersebut.
Berikut contoh carousel dengan kontrol, indikator dan caption
Kodenya seperti ini :
<div class="bd-example">
<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>
</div>Carousel dengan transisi
berikut ini carousel yang lebih keren lagi karena menggunakan efek transisi jika gambar tersebut berganti. jenis transisi nya adalah fade, kamu bisa mengganti efek transisi nya sendiri sesuai keinginan kamu masing-masing.
berikut ini contoh carousel dengan transisi :
Berikut ini script nya :
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Carousel dengan pengaturan waktu
jika kamu ingin mengganti delay waktu gambar saat berganti di slide carousel kamu bisa menggunakan carousel dengan pengaturan waktu berikut ini.
Berikut contoh carousel dengan pengaturan waktu
Script carousel dengan pengaturan waktu berikut ini :
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-interval="2000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>Kamu bisa mengganti data-interval nya jika ingin mempercepat atau memperlambat pergantian gambar di dalam carousel tersebut. Sesuaikan sendiri dengan kebutuhan kamu ya.
Akhir kata
Itulah bagaimana cara membuat carousel di bootstrap 4 dengan beberapa jenis carousel yang bisa kamu gunakan untuk membuat website company profile, blog ataupun website penjualan. semoga dengan tutorial ini dapat membantu kita semua. jangan lupa untuk membaca semua seri tutorial bootstrap 4 untuk pemula lainnya ya. happy coding.
