Cara Membuat Corousel/Slider Image Responsive Menggunakan Bootstrap 4 – Hai ketemu lagi dengan saya dewan komputer dan pada kesempatan kali ini saya akan membahas lagi tentang bootstrap yaitu tentang membuat corousel. Corousel sendiri adalah slider image atau gambar yang berjalan yang berfungsi sebagai hero banner pada suatu website. Semenjak munculnya HTML5, setiap perusahaan atau company yang ingin membuat company profile pasti akan menambahkan hero banner pada Beranda atau home mereka. Oleh karena itu saya ingin memposting tentang ini dan jika sobat menggunakan bootstrap, sobat tidak perlu lagi untuk membuat cssnya jadi kita bisa langsung menggunakannya nanti secara otomatis banner akan responsive design atau menyesuaikan layar. Enak bukan namun tentunya karena banyak yang menggunakan jadi mungkin agak mainstream. Untuk membuatnya unik kita bisa membuatnya dengan css yang kita buat sendiri dan itu akan saya bahas pada postingan saya selanjutnya karena pada postingan ini saya hanya akan membahas tentang bootstrap saja.
Agar banner dapat berjalan tentunya kita membutuhkan librari css dan js bootstrap dan jquery. Contoh penulisannya seperti berikut yang diletakkan pada tag <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Karena untuk keperluan demo jadi saya mencontohkan menggunakan librari online, namun jika sobat ingin menggunakan untuk keperluan development tentunya sobat harus mendownloadnya terlebih dahulu atau sobat bisa mendownloadnya bersama dengan project ini diakhir postingan. Untuk gambarnya sendiri saya mencontohkan 3 gambar yang mempunyai nama file dk2.png, dk3.png, dk4.png, silahkan sobat ganti bada bagian gambar src=”dk2.png” dst.
Macam-macam Corousel Pada Bootstrap
Berikut ini adalah macam-macam corousel yang ada pada bootstrap khususnya bootstrap 4 :
1. Corousel Standar
Pada contoh dibawah ada 3 gambar yang akan berganti dan mengulang secara terus menerus. Cara penulisannya
<div id="carouselStandar" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="dk2.png" class="d-block w-100" alt="gambar">
</div>
<div class="carousel-item">
<img src="dk3.png" class="d-block w-100" alt="gambar">
</div>
<div class="carousel-item">
<img src="dk4.png" class="d-block w-100" alt="gambar">
</div>
</div>
</div>
Tampilannya :
2. Corousel Dengan Control
Pada contoh ini kita akan menambahkan control sehingga kita bisa klik tombol next atau previous yang berupa icon arrow sehingga kita bisa melanjutkan atau kembali ke gambar/banner sebelumnya. Contoh penggunaannya
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="dk2.png" class="d-block w-100" alt="gambar">
</div>
<div class="carousel-item">
<img src="dk3.png" class="d-block w-100" alt="gambar">
</div>
<div class="carousel-item">
<img src="dk4.png" class="d-block w-100" alt="gambar">
</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>
Tampilannya :
3. Corousel Dengan Indikator
Pada contoh ini kita akan membuat image slider dengan indikator. Indikator ini otomatis akan muncul sesuai jumlah gambar slidernya dan akan menandai bahwa gambar yang sedang tampil berada pada urutan ke berapa. Contoh penggunaannya :
<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="dk2.png" class="d-block w-100" alt="gambar">
</div>
<div class="carousel-item">
<img src="dk3.png" class="d-block w-100" alt="gambar">
</div>
<div class="carousel-item">
<img src="dk4.png" class="d-block w-100" alt="gambar">
</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>
Tampilannya :
4, Corousel Dengan Caption
Kita juga bisa menambahkan dengan elemen bootstrap lainnya seperti header atau paragraf atau teks yang berada di atas gambar. Cara penulisannya adalah sebagai berikut
<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="dk2.png" class="d-block w-100" alt="gambar">
<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="dk3.png" class="d-block w-100" alt="gambar">
<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="dk4.png" class="d-block w-100" alt="gambar">
<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>
Tampilannya :
5. Corousel Dengan Efek Fade
Contoh penggunaannya adalah sebagai berikut
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="dk2.png" class="d-block w-100" alt="gambar">
</div>
<div class="carousel-item">
<img src="dk3.png" class="d-block w-100" alt="gambar">
</div>
<div class="carousel-item">
<img src="dk4.png" class="d-block w-100" alt="gambar">
</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>
Untuk lihat perbedaannya bisa sobat lihat pada demonya
6. Corousel Dengan Interval
Interval disini adalah untuk mensetting lama gambarnya tampil berapa detik dan bisa disetting berbeda-beda setiap gambarnya. Contoh penggunaannya :
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<img src="dk2.png" class="d-block w-100" alt="gambar">
</div>
<div class="carousel-item" data-interval="2000">
<img src="dk3.png" class="d-block w-100" alt="gambar">
</div>
<div class="carousel-item">
<img src="dk4.png" class="d-block w-100" alt="gambar">
</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>
Bagaimana enak bukan dan contoh diatas secara otomatis akan responsive design jadi besar gambar akan mengikuti layar dan secara otomatis akan mengecil jika layarnya berbeda. Sobat bisa mencoba dengan membesar dan kecilkan browser sobat pada halaman demo. Untuk secara custom akan saya posting pada postingan saya selanjutnya karena saya membunyai beberapa efek yang menarik jadi jangan sampai ketinggalan. Sekian postingan saya tentang Cara Membuat Corousel/Slider Image Responsive Menggunakan Bootstrap 4. Apabila ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah dan jika ada kesalahan saya mohon maaf. Kunjungi juga artikel saya lainnya untuk menambah ilmu sobat.
Artikel Tentang Bootstrap Lainnya :
Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah
Macam-macam Form Input pada HTML dan Bootstrap
Cara Membuat SweetAlert dan Macam-Macamnya pada PHP
Membuat Bootstrap Modal dan Animasinya pada PHP
Membuat Badges Menggunakan Bootstrap 4
Membuat Alert pada HTML menggunakan Bootstrap 4
Mengenal Bootstrap Typography pada HTML dan Bootstrap 4
Menggunakan Tooltip pada HTML dan Bootstrap 4
Membuat Nested Media Object pada Bootstrap 4
Membuat Navbar dengan Bootstrap 4 dengan Mudah
Membuat Border Menggunakan Bootstrap 4
Membuat Progress Bar dengan Bootstrap 4
Simple Pagination Pada Bootstrap 4
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :
Mas mau tanya kalau caption di dapatkan dari nama filenya bsa tdk ya?
jadi saya tdk perlu menambahakan caption, secara otomatis caption tersebut terisi dengan nama filenya
ngga pernah dapat kasus seperti itu,
kecuali nama file didapat dari database tinggal tambahkan/ganti menjadi
jika nama file hardcode ya caption jg hardcode kan gampang
mas apa ini harus bikin database Php???
php bukan database mas…
kalo gambarnya mau dinamis gampang ganti-gantinya di admin pake database tapi kalo statis/tetap ngga perlu database…
mas mau tanya source code alt=”gambar” itu apa maksudnya ya?
Alt teks gambar atau alt text image merupakan alternative text (teks) untuk gambar yang kita masukkan dalam postingan yg berguna untuk crawler bisa memahami terkait apakah gambar yang kita masukkan itu. Jadi buat SEO aja jadi ngga harus 1 kata bisa 1 kalimat jg…
Kok punya saya gak bisa ganti gambar ya? (Corousel control)
Kayak role=button gak berfungsi dengan baik gitu
Mohon bantuannya senpai
mungkin css/js-nya masih ada yg kurang atau versi lama ngga support corousel?
bootstrap.css/bootstrap.min.css, bootstrap.js/bootstrap.min.js, jquery.js/jquery.min.js
Mas, merubah navigasi kotak2 yg bawah jadi bulet2 gimana ya?
tinggal tambah css-nya
.carousel-indicators li {
width: 10px;
height: 10px;
border-radius: 100%;
}
mas klo mau buat background lingkaran di tanda panah next & prev nya gimana ya ?
tinggal tambahin css
contoh :
.carousel-control-next-icon, .carousel-control-prev-icon {
background-color: black !important;
border-radius: 50% !important;
}
Thanks artikelnya mas
mantab. thanx gan
Cara nambahin background warna di button next & prevnya gmn ya ?
tinggal tambahin css
contoh :
.carousel-control-next-icon, .carousel-control-prev-icon {
background-color: black !important;
border-radius: 50% !important;
}
Cara buat carousel yang isinya komponen ‘Card Image’ gimana ya kak?
Bisa g dibuatkan coding agar ada semacam dashboard untuk upload gambarnya beserta captionnya ? Jadi jika mau menambahkan gambar baru tidak perlu coding manual tapi cukup upload file beserta keterangan captionnya lalu file dan caption tsb nantinya muncul di slider
Mantap, wlwpun scriptnya ada yg kurang code bikin bingun buat pemula sepeti saya
interval slide waktu nya ubah di mn om?