Custome Slider Carousel Bootstrap 4
Custome Slider Carousel Bootstrap 4 - Didalam Bootstrap terdapat slider carousel yang bisa kita manfaatkan untuk dijadikan selider utama pada halaman atau dijadikan sebagai komponen galeri gambar. Pada kesempatan kali ini saya akan berbagi tutorial tentang slider carousel yaitu bagaimana Custome Slider Carousel Bootstrap 4. Buat kalian yang ingin coba custome slider carousel bootstrap bisa ikuti langakah - langkahnya berikut ini.
1. Bahan gambar
Sebelum memulai untuk custome slidernya, silahkan kalian bisa persiapkan bahan - bahan gambarnya terlebih dahulu, kalian bisa download gambarnya pada link berikut.
2. Membuat file index.html
Langkah selanjutnya silahkan kalian buat file index.html kemudian load semua library bootstrapnya, pada kasus yang saya buat kali ini saya menggunakan bootstrap 4 versi online atau kalian juga bisa menggunakan dengan versi offline dengan cara didownload terlebih dahulu dari halaman resmi bootstrapnya. Kemudian kalian ketikan sintak HTML seperti berikut.
<div class="row">
<div class="col-md-12">
<div id="carouselExampleFade" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-6 pr-md-0">
<img src="img-1.jpg" class="d-block w-100">
</div>
<div class="col-md-6 pl-md-0">
<img src="img-2.jpg" class="d-block w-100">
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-6 pr-md-0">
<img src="img-3.jpg" class="d-block w-100">
</div>
<div class="col-md-6 pl-md-0">
<img src="img-4.jpg" class="d-block w-100">
</div>
</div>
</div>
</div>
<div class="controls">
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<img src="left-arrow.png">
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<img src="right-arrow.png">
</a>
</div>
</div>
</div>
</div>
</div>
3. Membuat file custome.css
Selanjutnya adalah custome slider dengan CSS, silahkan kalian bisa ketikan sintak CSS untuk custome slider bootstrap berikut ini.
position: absolute;
bottom: -10%;
left: 20px;
}
.controls img {
width: 50px;
height: 50px;
}
.carousel-inner {
border-radius: 5px;
border: 2px solid #575d66;
}
.carousel-control-next {
left: 3rem;
}
.carousel-inner .carousel-item {
transition: -webkit-transform 2s ease;
transition: transform 2s ease;
transition: transform 2s ease,
-webkit-transform 2s ease;
}
Jangan lupa untuk diload file custome.css nya kemudian simpan kembali dan silahkan kalian bisa buka dibrowser masing - masing untuk melihat hasilnya.
Baiklah, cukup sekian tutorial Custome Slider Carousel Bootstrap 4, semoga tutorial ini bermanfaat selamat mencoba.
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
