Bootstrap Part 14 : Membuat Carousel Dengan Bootstrap


Membuat Carousel Dengan Bootstrap

Carousel atau sering juga di sebut slideshow merupakan proses penampilan gambar-gambar yang di beri efek slide. sangat banyak website atau situs yang menggunakan atau membuat slideshow/carousel pada halaman website mereka untuk mempromosikan sebuah produk unggulan atau dengan tujuan lainnya. biasanya carousel di letakkan pada halaman depan sebuah website dengan design yang berbagai macam dan tentunya menarik perhatian para pengunjung website.

Sangat sulit untuk membuat slideshow atau carousel dengan cara manual. tetapi dengan menggunakan bootstrap akan sangat mudah untuk membuat carousel karena bootstrap sudah menyediakan class untuk membuat fasilitas carousel ini. kita juga dapat menambahkan caption pada carousel bootstrap untuk membuat promosi atau dengan tujuan lain. Membuat Carousel Dengan Bootstrap

untuk mulai membuat carousel pada halaman website dengan menggunakan bootstrap yang pertama kali di buat adalah dengan menyiapkan beberapa file gambar yang akan kita gunakan menjadi gambar yang muncul pada carousel. di sini saya sudah menyediakan beberapa gambar yang akan saya jadikan sebagai gambar yang muncul pada carousel.

membuat carousel dengan bootstrap

membuat carousel dengan bootstrap

dan kemudian kita masuk ke cara membuat carousel dengan bootstrap.

cara membuat slideshow dengan bootstrap

cara membuat slideshow dengan bootstrap

carousel pun sudah jadi. sedikit pemberitahuan, pada contoh di atas saya menambahkan grid bootstrap untuk menentukan lebar gambar dan meletakkannya ke tengah-tengah. jadi jika anda tidak memerlukannya anda bisa menghilangkan class tersebut.

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

Sekian tutorial bootstrap part 14: Membuat carousel dengan bootstrap.

Tutorial Bootstrap Dasar Lainnya

Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap
Bootstrap Part 2 : Membuat Table dengan Bootstrap
Bootstrap Part 3 : Tampilan Gambar dengan Bootstrap
Bootstrap Part 4 : Membuat Tombol dengan Bootstrap
Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap
Bootstrap Part 6 : Membuat Pesan Alert dengan Bootstrap
Bootstrap Part 7 : Cara Membuat Icon dengan Bootstrap
Bootstrap Part 8 : Pagination dan Breadcrumb dengan Bootstrap
Bootstrap Part 9 : Membuat List dengan Bootstrap
Bootstrap Part 10 : Membuat Panel dengan Bootstrap
Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills dengan Bootstrap
Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
Bootstrap Part 13 : Membuat Form dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel dengan Bootstrap
Bootstrap Part 15 : Membuat Modal dengan Bootstrap
Bootstrap Part 16 : Mengenal System Grid Bootstrap

Incoming search terms:

  • cara membuat carousel dengan bootstrap
  • Membuat corusel di bootstrap malaangoding
  • cara membuat carousel
  • pengertian carousel
  • cara menggunakan carousel
  • membuat slideshow dengan bootstrap
  • cara membuat slide di bootstrap
  • cara membuat slider carousel
  • membuat slider bootstrap
  • ukuran dan posisi menggunakan bootstrap




About the author
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.


Discussion
  • 6 Comments
  • […] Part 12 : Membuat Navigation Bar Bootstrap Bootstrap Part 13 : Membuat Form dengan Bootstrap Bootstrap Part 14 : Membuat Carousel dengan Bootstrap Bootstrap Part 15 : Membuat Modal dengan Bootstrap Bootstrap Part 16 : Mengenal System Grid […]


  • justnewbiego 1 year ago

    maaf mas mau nanya, saya sudah ikuti tutornya dan bisa nampil carouselnya, tetapi pas di gese3r ke gambar selanjutnya kok caruoselnya malah melebar mas ??


    • admin 1 year ago

      ada 2 cara mengatasi nya menurut saya mas.
      pertama, kasih css width pada gambar nya mas, supaya ukurannya sama semua. itu melebar karena ukuran gambar nya gak sama semua.
      yang kedua ukuran gambar yang mau di pasang di carousel harus sama semua, bisa di edit dulu mungkin om..


  • […] Bootstrap Part 14 : Membuat Carousel Dengan Bootstrap […]


  • Hafiz 5 months ago

    mas, saya mau tanya, knp gambar saya cuma 1 yg tampil ya ? Padahal saya sudah memasukkan gambarnya.



Write a Comment

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


CENTANG untuk bisa mengirimkan komentar. [ Verifikasi bukan robot ]