Membuat Carousel / Image Slider dengan Bootstrap 5

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…

Share this article

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

Connect with us

Isi email kamu untuk terhubung dengan Haltev, soal trend, promo dan lainnya

Request Syllabus

Isi formulir pendaftaran dengan lengkap untuk mendapatkan silabus kelas.

Formulir Pendaftaran

Isi formulir pendaftaran dengan lengkap untuk mendaftar.

  • Potongan HargaRp. 00

Formulir Pendaftaran

Isi formulir pendaftaran dengan lengkap untuk mendaftar.

  • Potongan HargaRp. 00

Formulir Pendaftaran

Isi formulir pendaftaran dengan lengkap untuk mendaftar.

  • Potongan HargaRp. 00

Formulir Pendaftaran

Isi formulir pendaftaran dengan lengkap untuk mendaftar.

  • Potongan HargaRp. 00

Formulir Pendaftaran

Isi formulir pendaftaran dengan lengkap untuk mendaftar.

  • Potongan HargaRp. 00

Formulir Pendaftaran

Isi formulir pendaftaran dengan lengkap untuk mendaftar.

  • Potongan HargaRp. 00

Formulir Pendaftaran

Isi formulir pendaftaran dengan lengkap untuk mendaftar.

  • Potongan HargaRp. 00

Formulir Pendaftaran

Isi formulir pendaftaran dengan lengkap untuk mendaftar.

  • Potongan HargaRp. 00

Formulir Pendaftaran

Isi formulir pendaftaran dengan lengkap untuk mendaftar.

Konfirmasi Pembayaran

Isi formulir pendaftaran dengan lengkap untuk mendaftar.

Formulir Pendaftaran

Isi formulir pendaftaran dengan lengkap untuk mendaftar.

  • Potongan HargaRp. 00