Membuat Slide Carousel (Multiple item) dengan HTML, CSS dan Bootstrap Dinamis

Dalam mempelajari web programming html dan css untuk membuat slide gambar wajib tau Cara membuat carousel boostrap dinamis yang sebenarnya membuat slide sederhana ini bisa dibuat menggunakan owl carosel. Tapi pada postingan kali ini saya hanya ‘kan memberikan cara membuat carousel dengan bootstrap 4.

Carousel adalah komponen item yang berbentuk slide baik berbentuk gambar atau text.

Alasan saya membuat slide carousel dengan bootsrap 4 (framework css) karena lebih simpel dan tanpa harus menggunakan tools tambahan. Mungkin hanya memberikan sedikit CSS untuk menyesuaikan gaya slide sesuai keinginan sendiri.

Karena pada tutorial kali ini kita membuat carousel dengan boostrap 4 maka yang harus disiapkan ialah :

Buatlah file dengan ber ekstensi .html misal : index.html yang sudah terhubung dengan bootstrap 4. Bisa langsung tempel link sesuai dengan pedoman getboostrap.com (online) atau dengan mendownload file bootstrap kel lokal terlebih dahulu sehingga kita menggunakan boostrap 4 secara online offline.

Gambar tau foto dengan berekstensi bebas (jpg, jpeg atau png).

Cara Membuat Carousel Bootstrap 4 Dinamis

Silahkan copy-paste coding membuat carousel sederhana mengunakan booststrap ini.

<!doctype html> <html lang=”en”> <head> <!– Required meta tags –>
<meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”> <!– Bootstrap CSS –> <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” integrity=”sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z” crossorigin=”anonymous”> <title>Hardifal.com</title> </head> <body> <div id=”carouselExampleIndicators” class=”carousel slide m-4″ data-ride=”carousel”> <ol class=”carousel-indicators”> <li data-target=”#carouselExampleIndicators” data-slide-to=”0″ class=”active”></li> <li data-target=”#carouselExampleIndicators” data-slide-to=”1″></li> <li data-target=”#carouselExampleIndicators” data-slide-to=”2″></li> </ol> <div class=”carousel-inner”> <div class=”carousel-item active”> <div class=”row”> <div class=”col card”> <img src=”https://images.unsplash.com/photo-1555899434-94d1368aa7af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80″ class=”card-img-top” alt=”…”> <div class=”card-body”> <p class=”card-text”>Title</p> </div> </div> <div class=”col card”> <img src=”https://images.unsplash.com/photo-1555899434-94d1368aa7af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80″ class=”card-img-top” alt=”…”> <div class=”card-body”> <p class=”card-text”>Title</p> </div> </div> <div class=”col card”> <img src=”https://images.unsplash.com/photo-1555899434-94d1368aa7af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80″ class=”card-img-top” alt=”…”> <div class=”card-body”> <p class=”card-text”>Title</p> </div> </div> <div class=”col card”> <img src=”https://images.unsplash.com/photo-1555899434-94d1368aa7af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80″ class=”card-img-top” alt=”…”> <div class=”card-body”> <p class=”card-text”>Title</p> </div> </div> </div> </div> <div class=”carousel-item”> <div class=”row”> <div class=”col-6 card”> <img src=”https://images.unsplash.com/photo-1555899434-94d1368aa7af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80″ class=”card-img-top” alt=”…”> <div class=”card-body”> <p class=”card-text”>Title</p> </div> </div> <div class=”col-6 card”> <img src=”https://images.unsplash.com/photo-1555899434-94d1368aa7af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80″ class=”card-img-top” alt=”…”> <div class=”card-body”> <p class=”card-text”>Title</p> </div> </div> <div class=”col-6 card”> <img src=”https://images.unsplash.com/photo-1555899434-94d1368aa7af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80″ class=”card-img-top” alt=”…”> <div class=”card-body”> <p class=”card-text”>Title</p> </div> </div> <div class=”col-6 card”> <img src=”https://images.unsplash.com/photo-1555899434-94d1368aa7af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80″ class=”card-img-top” alt=”…”> <div class=”card-body”> <p class=”card-text”>Title</p> </div> </div> </div> </div> <div class=”carousel-item”> <img src=”https://images.unsplash.com/photo-1555899434-94d1368aa7af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80″ class=”d-block w-100″ alt=”…”> </div> </div> <a class=”carousel-control-prev” href=”#carouselExampleIndicators” 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=”#carouselExampleIndicators” role=”button” data-slide=”next”> <span class=”carousel-control-next-icon” aria-hidden=”true”></span> <span class=”sr-only”>Next</span> </a> </div> <!– Optional JavaScript –> <!– jQuery first, then Popper.js, then Bootstrap JS –> <script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js” integrity=”sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj” crossorigin=”anonymous”></script> <script src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js” integrity=”sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN” crossorigin=”anonymous”></script> <script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js” integrity=”sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV” crossorigin=”anonymous”></script> </body> </html>

Lalujalankan maka hasilnya :