Tutorial Bootstrap 4 #17 : Carousel Bootstrap 4


carousel bootstrap 4

Carousel Bootstrap 4 – Jika teman-teman juga membaca tutorial bootstrap versi 3 yang pernah dibahas juga di www.malasngoding.com, pasti teman-teman tidak asing lagi dengan yang namanya carousel.

Baca :

Tentu ada perbedaan dari carousel yang dibuat dengan bootstrap versi sebelumnya dengan bootstrap terbaru yaitu bootstrap 4.

Berikut penjelasan lengkap tentang caousel bootstrap 4. apa itu carousel? simak penjelasan berikut.

Carousel Bootstrap 4

Carousel adalah sebuah komponen yang berbentuk slider. bisa itu slider yang berbentuk gambar atau text.

Pada tutorial ini akan dijelaskan tentang kegunaan carousel dari bootstrap, dan bagaimana cara pembuatannya.

Karena kita akan masih menggunakan bootstrap, kembali kami ingatkan, kita harus sudah memiliki file bootstrapnya.

Seperti yang sudah dibahas pada tutorial bootstrap 4 bagian pertama, untuk cara instalasi bootstrap 4 silahkan teman-teman baca kembali tutorial bootstrap 4 sebelumnya yang sudah dibahas tentang cara instalasi bootstrap 4.

Sampai di sini, dianggap teman-teman sudah mengerti cara menghubungkan project dengan file bootstrap.

Membuat Carousel atau Slider Menggunakan Bootstrap

Pertama, siapkan beberapa file gambar yang akan kita tampilkan pada slider carousel nantinya. di contoh ini saya sudah menyediakan beberapa file gambar dengan nama image1.jpg, image2.jpg, image3.jpg.

Baca Juga : Cara Menampilkan Gambar Dengan HTML

Untuk membuat carousel atau slider bootstrap, silahkan teman-teman perhatikan syntax berikut.

carousel.html

Oke kita coba jalankan, untuk melihat hasilnya.

carousel bootstrap 4

contoh carousel atau slider bootstrap 4

Maka hasilnya carousel tampil dengan sempurna.

Penjelasan Carousel atau Slider Bootstrap

Perhatikan syntax di atas, pertama kita hubungkan dulu file ini dengan bootsrap seperti yang sudah dijelaskan sebelumnya.

Kemudian kita fokus ke bagian carouselnya, syntax berikut adalah bagian dari titik-titik pada carousel.

Kemudian bagian berikut adalah bagian carousel slidernya. silahkan letakkan file gambar yang ingin ditampilkan di slider pada bagian tag <img src=””>.

Dan terakhir bagian berikut adalah bagian link panah pada slider yang berfungsi untuk mengganti-ganti slider yang tampil baik itu mengarahkan ke slide selanjutnya maupun kembali ke slide sebelumnya.

Oke, sampai di sini kita telah selesai membuat slider atau carousell menggunakan bootstrap 4.

See the Pen Tutorial carousel bootstrap 4 by Malas Ngoding (@malasngoding) on CodePen.0

Jika teman-teman ingin membaca dokumentasi lengkapnya dari website resmi bootstrap, silahkan klik di sini.

Download Source Code

Demo

 

Incoming search terms:

  • membuat auto slide menggunakan bootstrap 4



Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

TUTORIAL MENARIK LAINNYA

tooltips bootstrap 4
spinners bootstrap 4
scrollspy
Diskusi
Tidak Ada Komentar