Cara Membuat Corousel/Slider Image Responsive Menggunakan Bootstrap 4

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>

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

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

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 :

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

Tampilannya :

 

5. Corousel Dengan Efek Fade

Contoh penggunaannya adalah sebagai berikut

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 :

 

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 :

Sampai jumpa pada postingan saya selanjutnya..

 

9 thoughts on “Cara Membuat Corousel/Slider Image Responsive Menggunakan Bootstrap 4

  1. 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

    1. 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

    1. php bukan database mas…
      kalo gambarnya mau dinamis gampang ganti-gantinya di admin pake database tapi kalo statis/tetap ngga perlu database…

    1. 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…

  2. Kok punya saya gak bisa ganti gambar ya? (Corousel control)
    Kayak role=button gak berfungsi dengan baik gitu
    Mohon bantuannya senpai

    1. 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

Leave a Reply

Your email address will not be published. Required fields are marked *

3 + fourteen =