Custom Carousel Bootstrap

halo teman teman, selamat datang di tutorial pemrogramman web dumet school, kali ini kita akan belajar membuat Custom Carousel Bootstrap, langsung saja kita praktekan yah teman teman.

Di tutorial kali ini kita akan belajar bagaimana merubah tampilan crousel boostrap yang secara default tampilannya seperti ini.

kita akan ubah menjadi seperti berikut teman teman

dimana tombol prev dan next akan berada di bagian kiri atas dan indicator aktive nya akan lebih besar dan berwarna merah sesuai dengan perpindahan slide nya.

sebelum nya kita harus membuat struktur dasar html dan menghubungkannya dengan bootstrap 4 yah teman teman. script nya seperti berikut.

<!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.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <title>Custom Carousl Bootstrap</title>
  </head>
  <body>
    
  </body>
</html>

lalu setelah itu kita buat class container dan slider nya yah teman teman. kode nya seperti berikut

<div class="container">
  <div class="row">
    <div class="col">
      <h2 class="text-center text-secondary">Custom Carousel Bootstrap</h2>
      <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active oke"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1" class="oke"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2" class="oke"></li>
        </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://fakeimg.pl/1200x500/FFC107,128/000,255//?text=Slide 1&font=arial">
          <div class="carousel-caption d-none d-md-block">
            <h5 class="text-dark">Slide Satu</h5>
            <p class="text-dark">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
          </div>
        </div>
        <div class="carousel-item">
         <img src="https://fakeimg.pl/1200x500/009688,128/000,255/?text=Slide 2&font=arial">
         <!-- <img src="https://fakeimg.pl/350x200/ff0000,128/000,255"> -->
         <div class="carousel-caption d-none d-md-block">
            <h5 class="text-dark">Slide Dua</h5>
            <p class="text-dark">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamd</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://fakeimg.pl/1200x500/3498db,128/000,255//?text=Slide 3&font=arial">
          <div class="carousel-caption d-none d-md-block">
            <h5 class="text-dark">Slide Tiga</h5>
            <p class="text-dark">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. </p>
          </div>
        </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>
    </div>
  </div>
</div>

dan tampilan dari kode di atas seperti ini teman teman.

lalu setelah itu kita buat custom css nya, ketikan kode css berikut yah teman teman

.carousel-control-prev{
    position: absolute;
    top:10px;
    background: red;
    padding: 20px;
    width: 50px;
    height: 20px;

  }

  .carousel-control-next{
    position: absolute;
    top:10px;
    left:55px;
    background: red;
    padding: 20px;
    width: 50px;
    height: 20px;
  }

  .oke{
    padding: 10px;
    position: absolute;
    top: 10px;
  }
  .carousel-indicators .active{
    background: #e74c3c;
  }

oke setelah itu coba kita jalankan di webrowser dan hasilnya akan seperti berikut ini

mudah bukan teman teman. sekian tutorial Custom Carousel Bootstrap, semoga bermanfaat yah teman teman.

Kategori