Sudah bias akita jumpai gambar yang bisa digeser, seperti pada website toko online ataupun blogspot.
Nah apakah kita membuat nya dengan Bootstrap 5 ??
Tentu saja bisa !! dan cukup cepat juga dalam penggunaannya.
Yuk langsung aja kita liat bagaimana caranya…
Menggunakan Carousel
Penggunaan carousel, ada di bagian component, seperti gambar dibawah ini
Nah setelah kita memilih Carousel, maka akan tampil halaman Carousel nya seperti ini.
Oiya ternyata ada 4 tipe carousel, apa aja sih ? Yuk simak…
Carousel Slide Only
Dengan kita menggunakan carousel slide only ini, artinya carousel kita hanya slide sendiri dengan waktu yang sudah ditentukan oleh bootstrap nya sendiri. Dan berikut adalah code untuk carousel slide only.
Code nya
Jadi disini hanya menggantikan gambar nya di tag HTML img saja ya yang bagian src nya.
Carousel with control
Dicarousel ini kita bisa mengatur slide nya sendiri karena ada nya tombol slider yang dapat kita gunakan nih.. bisa swipe kiri atau swipe kanan.. Berikut adalah tampilan di bootstrap nya
Dan ini adalah code nya
Untuk selengkapnya kalian bisa liat di website nya aja langsung yaaaa…
Carousel with Indicator
Kalau kita di carousel with controls, sudah bisa slide kanan atau kiri kan.. nah pada carousel with indicator ini kita juga tetap bisa slide kiri atau kanan juga, bahkan dengan with indicator ini kita akan diberikan indicator kita berada di slide keberapa. Berikut contoh tampilan carousel with indicator yang ada di website Bootstrap
Dan berikut adalah code nya
Selengkapnya bisa dilihat dari websitenya langsung aja yaaaa
Untuk yang terakhir, Carousel with Caption
Dengan carousel with caption ini, menjadi lengkap sudah carousel kita kenapa ? karena sudah ada button slider kiri atau kanan, sudah ada button indicator nya juga, dan ditambah lagi dengan caption. Jadi dengan carousel with caption ini, kita dapat menambahkan tulisan / caption apa saja di dalam carousel kita. Berikut tampilan pada website nya
Dan ini adalah code nya
Selengkapnya dapat kita lihat saja ya di websitenyaaa..
Nah jadi gimana ?
Gampangkan ternyata membuat gambar slider seperti itu..
Terima kasih yang sudah membaca, semoga bermanfaat…
