Bootstrap

Carousel Plugin Bootstrap: Bootstrap Tutorial #17

Kali ini kita masih akan membahas mengenai sesuatu yang sangat familiar dilihat olh teman – teman pada sebuah situs yaitu Carousel. apakah teman – teman baru mendengar istilah ini ? jika iya maka simak baik – baik mengenai pembahasan kali ini.

Carousel adalah sebuah plugin dari bootstrap yang memungkinkan kita membuat slideshow untuk berpindah antar elemen (gambar atau teks).

Plugin ini sudah terdapat dalam file “bootstrap.js” atau “bootstrap.min.js, jika teman – teman ingin memasukkan plugin ini tanpa bootstrap juga bisa yaitu dengan menambahkan file “carousel.js”.

Dasar Carousel

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
  <body>

  <div class="container">
    <h2>Contoh Carousel</h2>  
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indikator -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="https://dosenit.com/wp-content/uploads/2020/11/notepad.png" alt="Notepad++" style="width:100%;">
        </div>

        <div class="item">
          <img src="https://dosenit.com/wp-content/uploads/2020/11/sublime.png" alt="Sublime" style="width:100%;">
        </div>

        <div class="item">
          <img src="https://dosenit.com/wp-content/uploads/2020/10/eagle.jpg" alt="Eagle" style="width:100%;">
        </div>
      </div>

      <!-- Kontrol untukk pindah kanan dan kiri -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Sebelumnya</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Selanjutnya</span>
      </a>
    </div>
  </div>

  </body>
</html>

Penjelasan:

Bagian tag <div>:

  • Carousel bootstrap memerlukan penggunaan id (contoh diatas saya menggunakan id=”myCarousel”) agar dapat berfungsi dengan baik. Ini digunakan untuk mengatur kontrol dari carousel sendiri.
  • Carousel sendiri dibuat dengan menambahkan class .carousel dalam tag <div>. Karena corausel sendiri memerlukan tempat jadi tag div sangat cocok ya teman – teman.
  • Dalam contoh diatas saya menambahkan class .slide yang merupakan class tambahan yang digunakan untuk menambakahan efek transisi dan animasi, membuat item saat ini bergeser saat menampilkan item baru.
  • Selanjutnya adalah attribute data-ride="carousel" yang akan memberi tahu bootstrap untuk mulai menganimasikan plugin carousel segera setelah halaman dimuat.

Bagian indikator:

  • Indikator berfungsi untuk menandai seberapa banyak slide dari carousel sendiri dan slide mana yang dilihat oleh user. Kalau teman – teman belum tahu dimana letak indikator yaitu berada dibawah setiap slide dengan titik-titik kecil.
  • Indikator dimasukkan dalam tag <ol> dengan menggunakan class .carousel-indicators.
  • Attribute data-target digunakan untuk mengarahkan ke id dari carousel yang telah kita buat pertama
  • Attribute data-slide-to digunakan untuk menunjukan slide tujuan ketika men-klik indikator.

Bagian Wrapper:

  • Bagian Wrapper digunakan untuk bagian slide, dengan ditandai tag <div> yang memiliki class .carousel-inner
  • Isi setiap slide diletakkan dalam tag <div> dengan class .item , Isinya bisa berupa teks atau gambar.
  • Salah satu item carousel harus memiliki class .active jika tidak maka carousel tidak akan bisa muncul atau terlihat

Bagian Kontrol:

  • Bagian ini berisi tombol kanan dan kiri yang memungkinkan user untuk berpindah antar slide
  • Dalam Atribut data-slide terdapat class .prev atau .next, yang mengubah posisi slide relatif terhadap posisinya saat ini.

Menambahkan Caption ke Slide

Untuk menambahkan caption pada slide kita tinggal menambahkan tag dan class <div class="carousel-caption"> disetiap <div class="item"> pada carousel untuk menambahkan caption di setiap slide.

contohnya :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
  <body>

  <div class="container">
    <h2>Contoh Carousel</h2>  
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indikator -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper -->
      <div class="carousel-inner">
        <div class="item active">
          <img src="https://dosenit.com/wp-content/uploads/2020/11/notepad.png" alt="Notepad++" style="width:100%;">
          <!-- bagian caption -->
           <div class="carousel-caption">
             <h3>Notepad++</h3>
           <p>Salah satu text editor yang banyak digunakan!</p>
          </div>
          <!--akhir caption -->
        </div>

        <div class="item">
          <img src="https://dosenit.com/wp-content/uploads/2020/11/sublime.png" alt="Sublime" style="width:100%;">
          <!-- bagian caption -->
           <div class="carousel-caption">
             <h3>Sublime</h3>
           <p>Salah satu text editor yang banyak digunakan!</p>
          </div>
          <!--akhir caption -->
        </div>

        <div class="item">
         <img src="https://dosenit.com/wp-content/uploads/2020/10/eagle.jpg" alt="Eagle" style="width:100%;">
          <!-- bagian caption -->
           <div class="carousel-caption">
             <h3>Eagle</h3>
           <p>Aplikasi untuk membuat jalur komponen elektronika</p>
          </div>
          <!--akhir caption -->       
        </div>
      </div>

      <!-- Kontrol untukk pindah kanan dan kiri -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Sebelumnya</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Selanjutnya</span>
      </a>
    </div>
  </div>

  </body>
</html>

Sekian tutorial salah satu plugin dari bootstrap yang sangat banyak digunakan saat ini. Untuk selanjutnya dapat teman – teman kembangkan sendiri sesuai dengan kebutuhan dari website teman – teman .


YogaBayu

Seorang yang menyukai dunia elektronika dan website.

Share
Tags: Bootstrapcarouselcarousel adalahcarousel bootstrap