Tutorial Belajar Bootstrap 4 Part 20 – Membuat Carousel dengan Bootstrap

Selamat pagi teman – teman selamat datang lagi di tutorial warung belajar, masih dalam seri tutorial bootstrap 4, dalam tutorial kali ini kita akan membahas mengenai cara membuat Carousel dengan bootstrap, Carousel atau biasanya kita mengenal dengan istilah slideshow, Carousel digunakan untuk menampilkan gambar – gambar yang diberi effect slide, Carousel biasanya ditampilkan di halaman web untuk menampilkan gambar produk yang dijual dll.

Bootstrap menyediakan class yang digunakan untuk membuat bagian carousel, anda juga bisa menambahkan caption pada bagian carousel dengan menggunakan class – class yang disediakan bootstrap.

Baik kita mulai saja pembahasan dari carousel dengan bootstrap.

Cara Membuat Carousel dengan bootstrap

Untuk Contoh Skripnya adalah sebagai berikut :

Semisal kita simpan dengan nama carousel_bootstrap.html, lalu kita buka di browser maka hasilnya

Keterangan :

• kita perlu membuat object dengan menggunakan tag <div> dan menambahkan class carousel  dan class slide, serta menambahkan attribute data–ride dengan value carousel, perhatikan line 21, untuk tutup dari tag <div> ada pada line 50
• lalu berikutnya kita buat indikator dari jumlah slide, perhatikan pada line 24 – 28, karena slidenya ada 3 gambar sehingga kita membuat 3 indikator
• berikutnya kita buat item untuk slidenya, kita buat objectnya dulu dengan menggunakan tag <div> dan tambahkan class carousel-inner perhatikan pada line 31 dan tutup dari div ada di line 41.
• untuk item dari slidenya kita buat dengan menggunakan tag <div> dengan class carousel-item, tambahkan class active jika slidenya akan digunakan sebagai slide pertama yang ingin ditampilkan, karena slidenya ada 3 maka kita buat 3 tag <div> perhatikan pada line 32, 35, 38
• berikutnya anda juga bisa membuat control pada bagian slidenya, dengan menggunakan tag <a> dan tambahkan class carousel-control-prev, lalu tambahkan attribute dengan value prev (untuk tombol previous) dan value next (untuk tombol next), perhatikan pada line 44 dan line 47

Cara Membuat Caption pada Carousel

pada bagian sebelumnya kita sudah membuat Carousel dengan menggunakan bootstrap, dalam tutorial ini kita akan membahas mengenai cara menambahkan caption pada bagian carousel, untuk contoh skripnya perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama carousel_bootstrap_caption.html, lalu kita buka di browser maka hasilnya adalah :

Keterangan :

• Untuk menambahkan caption di masing – masing slide, silahkan tambahkan tag <div> dan class carousel-caption, dan tambahkan caption didalam tag <div> tersebut, perhatikan line 34, 41, dan 48

Baik Sekian dulu teman – teman untuk tutorial bootstrap 4 mengenai cara membuat carousel, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa ditutorial bootstrap 4 selanjutnya.