Cara Membuat Carousel/Slider Rensponsive Dengan Bootstrap 4
Halo teman-teman ketemu lagi dangan kita, gilakodingan pada kesempatan kali ini kita akan membahas tentang bootstrap yaitu tentang membuat carousel. Carousel sendiri adalah slider image atau gambar yang berjalan yang berfungsi sebagai hero banner pada suatu website, setiap perusahaan atau company yang ingin membuat company profile pasti akan menambahkan hero banner pada beranda atau home mereka. Oleh karena itu kita akan membahas bagaimana cara membuat carousel dengan bootstrap 4.
Kita langsung saja , bagaiman cara membuat carousel rensponsive dengan bootstrap 4. cuusss langsung saja kita praktekan, silahkan teman-teman menyimak..
Agar banner dapat berjalan tentunya kita membutuhkan librari CSS dan JS Bootstrap dan JQUERY, contoh penulisanya sebagai berikut, dan letakkan pada tag <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Macam-macam Carousel Pada Bootstrap
Berikut ini adalah macam-macam carousel yang ada pada bootstrap khususnya bootstrap 4
1. Carousel Standart
Pada contoh ini ada 3 gambar yang akan berganti dan mengulang secara terus menerus, cara menulisnya :
<div id="carouselStandar" class="carousel slide" data-ride="carousel"><div class="carousel-inner"><div class="carousel-item active"><img src="dk2.png" class="d-block w-100" alt="gambar"></div><div class="carousel-item"><img src="dk3.png" class="d-block w-100" alt="gambar"></div><div class="carousel-item"><img src="dk4.png" class="d-block w-100" alt="gambar"></div></div></div>
Tampilanya:
See the Pen Carousel Standart by Budiatu (@budiatu1) on CodePen.
2. Carousel Dengan Control
Pada contoh ini 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 penggunaanya
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"><div class="carousel-inner"><div class="carousel-item active"><img src="dk2.png" class="d-block w-100" alt="gambar"></div><div class="carousel-item"><img src="dk3.png" class="d-block w-100" alt="gambar"></div><div class="carousel-item"><img src="dk4.png" class="d-block w-100" alt="gambar"></div></div><a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
Tampilanya
See the Pen Carousel Dengan Control by Budiatu (@budiatu1) on CodePen.
3. Carousel Dengan Indikator
Pada contoh ini kita akan membuat image/slider dengan indikator. Indikator ini otomatis akan mencul sesuai jumlah gambar slidenya dan akan menandai bahawa gambar yang sedang tampil berada pada urutan ke berapa.
<div id="carouselExampleIndicators" class="carousel slide" 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"><img src="dk2.png" class="d-block w-100" alt="gambar"></div><div class="carousel-item"><img src="dk3.png" class="d-block w-100" alt="gambar"></div><div class="carousel-item"><img src="dk4.png" class="d-block w-100" alt="gambar"></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>
Tampilanya
See the Pen Carousel Dengan Caption by Budiatu (@budiatu1) on CodePen.
4. Carousel Dengan Caption
Kita juga bisa menambahkan dengan elemen bootstrap lainya seperti header atau paragraf atau teks yang berada di atas gambar, contoh penulisanya sebagai berikut
<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="dk2.png" class="d-block w-100" alt="gambar"><div class="carousel-caption d-none d-md-block"><h5>First slide label</h5><p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p></div></div><div class="carousel-item"><img src="dk3.png" class="d-block w-100" alt="gambar"><div class="carousel-caption d-none d-md-block"><h5>Second slide label</h5><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div><div class="carousel-item"><img src="dk4.png" class="d-block w-100" alt="gambar"><div class="carousel-caption d-none d-md-block"><h5>Third slide label</h5><p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</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>
Tampilanya
See the Pen Carousel Dengan Caption by Budiatu (@budiatu1) on CodePen.
5. Carousel Dengan Efek Fade
Contoh penggunaanya sebagai berikut, untuk lihat perbedaanya sobat lihat pada demonya.
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel"><div class="carousel-inner"><div class="carousel-item active"><img src="dk2.png" class="d-block w-100" alt="gambar"></div><div class="carousel-item"><img src="dk3.png" class="d-block w-100" alt="gambar"></div><div class="carousel-item"><img src="dk4.png" class="d-block w-100" alt="gambar"></div></div><a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
Tampilanya
See the Pen Carousel Dengan Efek Fade by Budiatu (@budiatu1) on CodePen.
6. Carousel Dengan Interval
Interval disini adlah untuk mensetting lama gambarnya tampil beberapa detik dan bisa disetting berbeda-beda setiap gambarnya, contoh:
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel"><div class="carousel-inner"><div class="carousel-item active" data-interval="10000"><img src="dk2.png" class="d-block w-100" alt="gambar"></div><div class="carousel-item" data-interval="2000"><img src="dk3.png" class="d-block w-100" alt="gambar"></div><div class="carousel-item"><img src="dk4.png" class="d-block w-100" alt="gambar"></div></div><a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
Tampilanya
See the Pen Carousel Dengan Interval by Budiatu (@budiatu1) on CodePen.
Bagaimana enak bukan, contoh diatas secara otomatis karena rensponsive design jadi besar gambar akan mengikuti layar secara otomatis, sekian artikel dari saya semoga bermanfaat bagi teman-teman dan terus berkarya dan berlajar.
Sampai bertemu di tutorial selanjutnya Terima kasih ....
Post a Comment