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.

Download Gambar

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="container mt-5">
  <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.

.controls {
  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.

Custome Slider Carousel Bootstrap 4

Baiklah, cukup sekian tutorial Custome Slider Carousel Bootstrap 4, semoga tutorial ini bermanfaat selamat mencoba.

6 Januari 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat