Tutorial Bootstrap 4 #17 : 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="assets/css/bootstrap.css"> <title>Tutorial Membuat Carousel Dengan Bootstrap 4 - www.malasngoding.com</title> </head> <body> <div class="container"> <center> <h3>Tutorial Membuat Carousel Dengan Bootstrap 4</h3> <h4><a href="https://www.malasngoding.com/carousel-bootstrap-4/">www.malasngoding.com</a></h4> </center> <div class="bd-example"> <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleCaptions" data-slide-to="1"></li> <li data-target="#carouselExampleCaptions" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="image1.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Gambar Slide Yang Pertama</h5> <p>Gambar pemandangan sungai.</p> </div> </div> <div class="carousel-item"> <img src="image2.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Gambar Slide Yang Kedua</h5> <p>Gambar pemandangan sawah di desa.</p> </div> </div> <div class="carousel-item"> <img src="image3.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Gambar Slide Yang Ketiga</h5> <p>Gambar pemandangan taman belakang rumah.</p> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> <script src="assets/js/jquery.js"></script> <script src="assets/js/popper.js"></script> <script src="assets/js/bootstrap.js"></script> </body> </html> |
Oke kita coba jalankan, untuk melihat hasilnya.
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.
|
1 2 3 4 5 |
<link rel="stylesheet" href="assets/css/bootstrap.css"> ... <script src="assets/js/jquery.js"></script> <script src="assets/js/popper.js"></script> <script src="assets/js/bootstrap.js"></script> |
Kemudian kita fokus ke bagian carouselnya, syntax berikut adalah bagian dari titik-titik pada carousel.
|
1 2 3 4 5 |
<ol class="carousel-indicators"> <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleCaptions" data-slide-to="1"></li> <li data-target="#carouselExampleCaptions" data-slide-to="2"></li> </ol> |
Kemudian bagian berikut adalah bagian carousel slidernya. silahkan letakkan file gambar yang ingin ditampilkan di slider pada bagian tag <img src=””>.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="carousel-inner"> <div class="carousel-item active"> <img src="image1.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Gambar Slide Yang Pertama</h5> <p>Gambar pemandangan sungai.</p> </div> </div> <div class="carousel-item"> <img src="image2.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Gambar Slide Yang Kedua</h5> <p>Gambar pemandangan sawah di desa.</p> </div> </div> <div class="carousel-item"> <img src="image3.jpg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Gambar Slide Yang Ketiga</h5> <p>Gambar pemandangan taman belakang rumah.</p> </div> </div> </div> |
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.
|
1 2 3 4 5 6 7 8 |
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> |
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.
Jika teman-teman ingin membaca dokumentasi lengkapnya dari website resmi bootstrap, silahkan klik di sini.
Tutorial Menarik Lainnya
Tutorial Bootstrap 4 #35 : Border Bootstrap 4
Tutorial Bootstrap 4 #34 : Tooltips Bootstrap 4
Tutorial Bootstrap 4 #33 : Toasts Bootstrap 4
Tutorial Bootstrap 4 #32 : Spinners Bootstrap 4
Bagaimana jika tinggi gambar berbeda-beda?