Bootstrap 3 Carousel - Tutorial Bootstrap Indonesia

Terakhir diperbarui : 9 September 2018 - 09.09

Table of contents

Tutorial Bootstrap Carousel

TrikSonic - Carousel yang juga dikenal dengan slideshow (slide) atau image slider (slider gambar) adalah mempresentasikan konten yang secara dinamis baik itu teks ataupun media yang dibuat agar terlihat menonjol dan dapat menarik perhatian pengunjung atau user.

Carousel atau slideshow biasanya digunakan untuk menampilkan konten yang diprioritaskan seperti iklan, artikel, product jualan dan lain sebagainya.

Melalui tutorial ini kita akan mempelajari secara detail tentang bagaimana cara membuat Carousel atau slideshow dengan menggunakan Bootstrap, sehingga nantinya dapat mengembangkan teknik yang lebih baik lagi dalam pembuatan Carousel

Catatan : Penggunaan Carousel pada Bootstrap, memerlukan jQuery dan Bootstrap Javascript.

Basic Carousel

Berikut contoh dasar dalam pembuatan Carousel pada bootstrap.

1234567891011121314151617<div class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
  
    <div class="item active">
      <img src="..." alt="Demo 1">
    </div>

    <div class="item">
      <img src="..." alt="Demo 2">
    </div>

    <div class="item">
      <img src="..." alt="Demo 3">
    </div>
    
  </div>
</div>

Penjelasan

.carousel : merupakan class dasar dalam pembuatan carousel pada bootstrap. Dapat dilihat pada baris [1]
.slide : digunakan untuk menambahkan efek transisi dan animasi css pada saat perpindah slide. Abaikan class ini jika tidak menginginkan adanya efek transisi dan animasi.
data-ride="carousel" Digunakan untuk mengaktifkan carousel slider otomatis tanpa perlu adanya interaksi dari user
.item digunakan sebagai class pembuat daftar dari slider, gunakan element <div> untuk menggunakannya, lalu masukkan gambar didalam area ini. Secara default class .item tanpa diiringi class .active mempunyai tampilan tidak terlihat
.active untuk menampilkan daftar yang terlihat, baik secara default atau maupun pada saat proses slide sedang berjalan.

Preview

<div class="container ts-example mt-20">
<style>.ts-example .item img{height:200px !important;width:100%;}</style>
<div class="carousel slide" data-ride="carousel"><div class="carousel-inner"><div class="item active"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfngU5mHv-kuMMX-X9zr_e2saiGvqBN335gd_Xl3aMIk6Yfg19yVVCMMCkmw8Oy7biTfdACtUL5CFe2Ie9LplIhq5Tx0G54oe42rBikOMtLq0vaSpAjlFfNh2ay19XqWjGFJ6KObnuEgg8/s1600/ts-holder-1.png" alt="Demo 1"></div><div class="item"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSohtFvaGgOuNOXB_jxpG54crdYSkv7IrkBs7kBycTubKI3At3Nrq24DF704Gwbi9duPD5F_wKvJuL0GxjlG2Kjq0bRMfGt-Y2clqq_bj6vUzejMoZA-yAfwCBci5-DaihDoHP1P8sMT5k/s1600/ts-holder-2.png" alt="Demo 2"></div><div class="item"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYF3IWczt6VrIz8IcHBn711pDDD6EbVq7Tesijty1N9-9JYVv_cK88p4Y1y5SjWxcRe2ZhTel_fqzQxTR1g6RgCHLeKTvenzxSGVYQpFtVUWYCf3kEezqlrBJ5m2aRc_Y7ThEpT_GpVUea/s1600/ts-holder-3.png" alt="Demo 3"></div></div></div>
</div>

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap 3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body class="container">
<h2>Bootstrap 3 Carousel</h2>


<div class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
  
    <div class="item active">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfngU5mHv-kuMMX-X9zr_e2saiGvqBN335gd_Xl3aMIk6Yfg19yVVCMMCkmw8Oy7biTfdACtUL5CFe2Ie9LplIhq5Tx0G54oe42rBikOMtLq0vaSpAjlFfNh2ay19XqWjGFJ6KObnuEgg8/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSohtFvaGgOuNOXB_jxpG54crdYSkv7IrkBs7kBycTubKI3At3Nrq24DF704Gwbi9duPD5F_wKvJuL0GxjlG2Kjq0bRMfGt-Y2clqq_bj6vUzejMoZA-yAfwCBci5-DaihDoHP1P8sMT5k/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYF3IWczt6VrIz8IcHBn711pDDD6EbVq7Tesijty1N9-9JYVv_cK88p4Y1y5SjWxcRe2ZhTel_fqzQxTR1g6RgCHLeKTvenzxSGVYQpFtVUWYCf3kEezqlrBJ5m2aRc_Y7ThEpT_GpVUea/s1600/ts-holder-3.png" alt="Demo 3">
    </div>
    
  </div>
</div>


<!-- jQuery, Bootstrap js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Indikator dan Kontrol Carousel

Apa itu indikator pada Carousel ? indikator carousel artinya bilah / bidang yang digunakan sebagai info status slide yang sedang aktif sekaligus menjadi kontrol.

Apa itu Kontrol pada Carousel ? Kontrol carousel artinya sebagai element pemicu yang bisa dilakukan oleh user atau pengguna dalam menggerakkan atau memindah slide, contohnya seperti tombol selanjutnya dan tombol sebelumnya

Untuk menjalankan fungsi indikator dan kontrol pada Carousel, element utama dari Carousel wajib memiliki attribute ID unik. Hal ini digunakan sebagai patokan javascript bootstrap dalam melakukan fungsinya.

HTML Code Indikator Carousel

Berikut contoh pemasangan indikator Carousel

123456789101112131415161718192021222324<div id="tes-carousel" class="carousel slide" data-ride="carousel">
  <!-- indikator -->
  <ol class="carousel-indicators">
    <li data-target="#tes-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#tes-carousel" data-slide-to="1"></li>
    <li data-target="#tes-carousel" data-slide-to="2"></li>
  </ol>
  <!-- indikator close -->
  
  <div class="carousel-inner">
    <div class="item active">
      <img src="...." alt="Demo 1"/>
    </div>

    <div class="item">
      <img src="..." alt="Demo 2"/>
    </div>

    <div class="item">
      <img src="...." alt="Demo 3"/>
    </div>
    
  </div>
</div>

Penjelasan :

data-target="#tes-carousel" attribute ini wajib ditulis, nilai dari attributenya diambil dari attribute ID dari element pembungkus utama (dapat dilihat pada yang bertanda stabilo diatas), sesuaikan dengan ID yang anda gunakan.
data-slide-to="0" berfungsi sebagai target slide yang akan buka. Cara menentukannya adalah dengan menghitung jumlah element dengan class .item
- Misal ; jika data-slide-to = 0, maka item targetnya adalah yang pertama, Contoh diatas pada element div baris ke 11
- jika data-slide-to = 1 maka item targetnya yang kedua, Contoh diatas pada element div baris ke 15
- dan seterusnya.
.active pada baris ke 4 digunakan sebagai menampilkan indikator sedang aktif. Nama class ini menyesuaikan dengan element DIV .item yang mempunyai class .active pada baris 11

Preview

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap 3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body class="container">
<h2>Bootstrap 3 Indikator Carousel</h2>


<div id="tes-carousel" class="carousel slide" data-ride="carousel">
  <!-- indikator -->
  <ol class="carousel-indicators">
    <li data-target="#tes-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#tes-carousel" data-slide-to="1"></li>
    <li data-target="#tes-carousel" data-slide-to="2"></li>
  </ol>
    
  <div class="carousel-inner">
    <div class="item active">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfngU5mHv-kuMMX-X9zr_e2saiGvqBN335gd_Xl3aMIk6Yfg19yVVCMMCkmw8Oy7biTfdACtUL5CFe2Ie9LplIhq5Tx0G54oe42rBikOMtLq0vaSpAjlFfNh2ay19XqWjGFJ6KObnuEgg8/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSohtFvaGgOuNOXB_jxpG54crdYSkv7IrkBs7kBycTubKI3At3Nrq24DF704Gwbi9duPD5F_wKvJuL0GxjlG2Kjq0bRMfGt-Y2clqq_bj6vUzejMoZA-yAfwCBci5-DaihDoHP1P8sMT5k/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYF3IWczt6VrIz8IcHBn711pDDD6EbVq7Tesijty1N9-9JYVv_cK88p4Y1y5SjWxcRe2ZhTel_fqzQxTR1g6RgCHLeKTvenzxSGVYQpFtVUWYCf3kEezqlrBJ5m2aRc_Y7ThEpT_GpVUea/s1600/ts-holder-3.png" alt="Demo 3">
    </div>

  </div>
</div>


<!-- jQuery, Bootstrap js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

HTML Code Kontrol Carousel

Berikut contoh pemasangan Kontrol Carousel

12345678910111213141516171819202122232425<div id="tes-carousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active">
      <img src="...." alt="Demo 1"/>
    </div>

    <div class="item">
      <img src="..." alt="Demo 2"/>
    </div>

    <div class="item">
      <img src="...." alt="Demo 3"/>
    </div>
    
  </div>
  <!-- kontrol-->
  <a class="carousel-control left" href="#tes-carousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control right" href="#tes-carousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Penjelasan : Baris 17 - 24

.carousel-control nama class dasar untuk kontrol carousel
.left mengatur posisi berada dikiri
href="#tes-carousel" menyesuaikan dengan Attribute ID yang yang digunakan, dapat dilihat pada susunan code yang berstabilo
data-slide="prev" (Previous/Sebelumnya) wajib untuk ditulis untuk dieksekusi oleh Bootstrap JavaScript
.right mengatur posisi berada dikanan
data-slide="next" (Next/Selanjutnya) wajib untuk ditulis untuk dieksekusi oleh Bootstrap JavaScript

Preview

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap 3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body class="container">
<h2>Bootstrap 3 Kontrol Carousel</h2>


<div id="tes-carousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfngU5mHv-kuMMX-X9zr_e2saiGvqBN335gd_Xl3aMIk6Yfg19yVVCMMCkmw8Oy7biTfdACtUL5CFe2Ie9LplIhq5Tx0G54oe42rBikOMtLq0vaSpAjlFfNh2ay19XqWjGFJ6KObnuEgg8/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSohtFvaGgOuNOXB_jxpG54crdYSkv7IrkBs7kBycTubKI3At3Nrq24DF704Gwbi9duPD5F_wKvJuL0GxjlG2Kjq0bRMfGt-Y2clqq_bj6vUzejMoZA-yAfwCBci5-DaihDoHP1P8sMT5k/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYF3IWczt6VrIz8IcHBn711pDDD6EbVq7Tesijty1N9-9JYVv_cK88p4Y1y5SjWxcRe2ZhTel_fqzQxTR1g6RgCHLeKTvenzxSGVYQpFtVUWYCf3kEezqlrBJ5m2aRc_Y7ThEpT_GpVUea/s1600/ts-holder-3.png" alt="Demo 3">
    </div>
  </div>
  <!-- kontrol-->
  <a class="carousel-control left" href="#tes-carousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control right" href="#tes-carousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>


<!-- jQuery, Bootstrap js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Contoh Indikator dan Kontrol Carousel

<div id="tes-carousel" class="carousel slide" data-ride="carousel">
  <!-- indikator -->
  <ol class="carousel-indicators">
    <li data-target="#tes-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#tes-carousel" data-slide-to="1"></li>
    <li data-target="#tes-carousel" data-slide-to="2"></li>
  </ol>
    
  <div class="carousel-inner">
    <!-- slide 1 -->
    <div class="item active">
      <img src="..." alt="Demo 1">
    </div>
    <!-- slide 2 -->
    <div class="item">
      <img src="..." alt="Demo 2">
    </div>
    <!-- slide 3 -->
    <div class="item">
      <img src="..." alt="Demo 3">
    </div>
    
  </div>
  
  <!-- kontrol-->
  <a class="carousel-control left" href="#tes-carousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control right" href="#tes-carousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
  
</div>

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap 3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body class="container">
<h2>Bootstrap 3 <small>Indikator dan Kontrol Carousel</small></h2>


<div id="tes-carousel" class="carousel slide" data-ride="carousel">
  <!-- indikator -->
  <ol class="carousel-indicators">
    <li data-target="#tes-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#tes-carousel" data-slide-to="1"></li>
    <li data-target="#tes-carousel" data-slide-to="2"></li>
  </ol>
    
  <div class="carousel-inner">
    <div class="item active">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfngU5mHv-kuMMX-X9zr_e2saiGvqBN335gd_Xl3aMIk6Yfg19yVVCMMCkmw8Oy7biTfdACtUL5CFe2Ie9LplIhq5Tx0G54oe42rBikOMtLq0vaSpAjlFfNh2ay19XqWjGFJ6KObnuEgg8/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSohtFvaGgOuNOXB_jxpG54crdYSkv7IrkBs7kBycTubKI3At3Nrq24DF704Gwbi9duPD5F_wKvJuL0GxjlG2Kjq0bRMfGt-Y2clqq_bj6vUzejMoZA-yAfwCBci5-DaihDoHP1P8sMT5k/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYF3IWczt6VrIz8IcHBn711pDDD6EbVq7Tesijty1N9-9JYVv_cK88p4Y1y5SjWxcRe2ZhTel_fqzQxTR1g6RgCHLeKTvenzxSGVYQpFtVUWYCf3kEezqlrBJ5m2aRc_Y7ThEpT_GpVUea/s1600/ts-holder-3.png" alt="Demo 3">
    </div>
  </div>
  
  <!-- kontrol-->
  <a class="carousel-control left" href="#tes-carousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control right" href="#tes-carousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>


<!-- jQuery, Bootstrap js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Caption Carousel

Untuk menambahkan sebuah caption pada slide gunakan element HTML <div> dengan class .carousel-caption, letakkan didalam element daftar slide yang mempunyai class .item, berikut cara penulisannya :

<div class="item">
  <img src="..." alt="...">
  <!-- caption -->
  <div class="carousel-caption">
    <!-- konten caption disini -->
  </div>
</div>

Contoh

<div class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
  
    <!-- slide 1 -->
    <div class="item active">
      <img src="..." alt="Demo 1"/>
      <!-- caption -->
      <div class="carousel-caption">
        <h3>Judul Caption 1</h3>
        <p>Keterangan selanjutnya Caption 1</p>
      </div>
    </div>
    
    <!-- slide 2 -->
    <div class="item">
      <img src="..." alt="Demo 2"/>
      <!-- caption -->
      <div class="carousel-caption">
        <h3>Judul Caption 2</h3>
        <p>Keterangan selanjutnya Caption 2</p>
      </div>
    </div>
    
    <!-- slide 3 -->
    <div class="item">
      <img src="..." alt="Demo 3"/>
      <!-- caption -->
      <div class="carousel-caption">
        <h3>Judul Caption 3</h3>
        <p>Keterangan selanjutnya Caption 3</p>
      </div>
    </div>
    
  </div>
</div>

Hasil

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap 3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body class="container">
<h2>Bootstrap 3 <small>Carousel Caption</small></h2>

<div class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
  
    <!-- slide 1 -->
    <div class="item active">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfngU5mHv-kuMMX-X9zr_e2saiGvqBN335gd_Xl3aMIk6Yfg19yVVCMMCkmw8Oy7biTfdACtUL5CFe2Ie9LplIhq5Tx0G54oe42rBikOMtLq0vaSpAjlFfNh2ay19XqWjGFJ6KObnuEgg8/s1600/ts-holder-1.png" alt="Demo 1"/>
      <!-- caption -->
      <div class="carousel-caption">
        <h3>Judul Caption 1</h3>
        <p>Keterangan selanjutnya Caption 1</p>
      </div>
    </div>
    
    <!-- slide 2 -->
    <div class="item">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSohtFvaGgOuNOXB_jxpG54crdYSkv7IrkBs7kBycTubKI3At3Nrq24DF704Gwbi9duPD5F_wKvJuL0GxjlG2Kjq0bRMfGt-Y2clqq_bj6vUzejMoZA-yAfwCBci5-DaihDoHP1P8sMT5k/s1600/ts-holder-2.png" alt="Demo 2"/>
      <!-- caption -->
      <div class="carousel-caption">
        <h3>Judul Caption 2</h3>
        <p>Keterangan selanjutnya Caption 2</p>
      </div>
    </div>
    
    <!-- slide 3 -->
    <div class="item">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYF3IWczt6VrIz8IcHBn711pDDD6EbVq7Tesijty1N9-9JYVv_cK88p4Y1y5SjWxcRe2ZhTel_fqzQxTR1g6RgCHLeKTvenzxSGVYQpFtVUWYCf3kEezqlrBJ5m2aRc_Y7ThEpT_GpVUea/s1600/ts-holder-3.png" alt="Demo 3"/>
      <!-- caption -->
      <div class="carousel-caption">
        <h3>Judul Caption 3</h3>
        <p>Keterangan selanjutnya Caption 3</p>
      </div>
    </div>
    
  </div>
</div>

<!-- jQuery, Bootstrap js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

Full Contoh Carousel

<div id="tes-carousel" class="carousel slide" data-ride="carousel">
  <!-- indikator -->
  <ol class="carousel-indicators">
    <li data-target="#tes-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#tes-carousel" data-slide-to="1"></li>
    <li data-target="#tes-carousel" data-slide-to="2"></li>
  </ol>
    
  <div class="carousel-inner">
  
    <!-- slide 1 -->
    <div class="item active">
      <img src="/ts-holder-1.png" alt="Demo 1"/>
      <!-- caption -->
      <div class="carousel-caption">
        <h3>Judul Caption 1</h3>
        <p>Keterangan selanjutnya Caption 1</p>
      </div>
    </div>
    
    <!-- slide 2 -->
    <div class="item">
      <img src="/ts-holder-2.png" alt="Demo 2"/>
      <!-- caption -->
      <div class="carousel-caption">
        <h3>Judul Caption 2</h3>
        <p>Keterangan selanjutnya Caption 2</p>
      </div>
    </div>
    
    <!-- slide 3 -->
    <div class="item">
      <img src="/ts-holder-3.png" alt="Demo 3"/>
      <!-- caption -->
      <div class="carousel-caption">
        <h3>Judul Caption 3</h3>
        <p>Keterangan selanjutnya Caption 3</p>
      </div>
    </div>
    
  </div>
  
  <!-- kontrol-->
  <a class="carousel-control left" href="#tes-carousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control right" href="#tes-carousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
  
</div>

Hasil

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8"/>
  <title>Triksonic Demo Bootstrap 3</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- CSS Bootstrap 3 -->
  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/>
</head>
<body>
<article class="container">
<h2>Bootstrap 3 <small>Full Contoh Carousel</small></h2>


<div id="tes-carousel" class="carousel slide" data-ride="carousel">
  <!-- indikator -->
  <ol class="carousel-indicators">
    <li data-target="#tes-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#tes-carousel" data-slide-to="1"></li>
    <li data-target="#tes-carousel" data-slide-to="2"></li>
  </ol>
    
  <div class="carousel-inner">
  
    <!-- slide 1 -->
    <div class="item active">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfngU5mHv-kuMMX-X9zr_e2saiGvqBN335gd_Xl3aMIk6Yfg19yVVCMMCkmw8Oy7biTfdACtUL5CFe2Ie9LplIhq5Tx0G54oe42rBikOMtLq0vaSpAjlFfNh2ay19XqWjGFJ6KObnuEgg8/s1600/ts-holder-1.png" alt="Demo 1"/>
      <!-- caption -->
      <div class="carousel-caption">
        <h3>Judul Caption 1</h3>
        <p>Keterangan selanjutnya Caption 1</p>
      </div>
    </div>
    
    <!-- slide 2 -->
    <div class="item">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSohtFvaGgOuNOXB_jxpG54crdYSkv7IrkBs7kBycTubKI3At3Nrq24DF704Gwbi9duPD5F_wKvJuL0GxjlG2Kjq0bRMfGt-Y2clqq_bj6vUzejMoZA-yAfwCBci5-DaihDoHP1P8sMT5k/s1600/ts-holder-2.png" alt="Demo 2"/>
      <!-- caption -->
      <div class="carousel-caption">
        <h3>Judul Caption 2</h3>
        <p>Keterangan selanjutnya Caption 2</p>
      </div>
    </div>
    
    <!-- slide 3 -->
    <div class="item">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYF3IWczt6VrIz8IcHBn711pDDD6EbVq7Tesijty1N9-9JYVv_cK88p4Y1y5SjWxcRe2ZhTel_fqzQxTR1g6RgCHLeKTvenzxSGVYQpFtVUWYCf3kEezqlrBJ5m2aRc_Y7ThEpT_GpVUea/s1600/ts-holder-3.png" alt="Demo 3"/>
      <!-- caption -->
      <div class="carousel-caption">
        <h3>Judul Caption 3</h3>
        <p>Keterangan selanjutnya Caption 3</p>
      </div>
    </div>
    
  </div>
  
  <!-- kontrol-->
  <a class="carousel-control left" href="#tes-carousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control right" href="#tes-carousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
  
</div>

</article>

<!-- jQuery, Bootstrap js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

4 komentar

teno7/14/2020Balas Komentar ini

thanks penjelasannya

Unknown9/27/2020Balas Komentar ini

mantap slurr

Unknown9/27/2020Balas Komentar ini

terimakasih blog nya sangat membantu good job

Dukungan ITQ10/04/2021Balas Komentar ini

Blog nya unik dan keren mas.. Lanjutkan.

Posting Komentar

Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
- Tanpa menggunakan https: dan http:
Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
Pengguna bertanggung jawab atas komentar yang dikirim
Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Judul	`Bootstrap 3 Carousel - Tutorial Bootstrap Indonesia`
Label	`Bootstrap 3`
Diposting pada	`11 Maret 2018 - 02:10`
Diperbaharui pada	`9 September 2018 - 09:09`
Komentar	4 komentar

Bootstrap 3 Carousel - Tutorial Bootstrap Indonesia

Tutorial Bootstrap Carousel

Basic Carousel

Penjelasan

Preview

Indikator dan Kontrol Carousel

HTML Code Indikator Carousel

Penjelasan :

Preview

HTML Code Kontrol Carousel

Penjelasan : Baris 17 - 24

Preview

Contoh Indikator dan Kontrol Carousel

Caption Carousel

Contoh

Hasil

Full Contoh Carousel

Hasil

4 komentar

Posting Komentar

Ketentuan Komentar

Post Info

Populer Post

Arsip Blog

Label