Custome Slider Carousel Bootstrap 4

06/01/2020    Risman Hakim    210     Website

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.

Web Design, HTML CSS, Bootstrap

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More