Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Bootstrap 3

Bootstrap 3 Carousel - Tutorial Bootstrap Indonesia

Table of contents
TrikSonic - Carousel yang juga dikenal dengan slideshow (slide) atau image slider (slider gambar) yaitu mempresentasikan konten yang secara dinamis baik itu teks ataupun media yang dibentuk semoga terlihat menonjol dan sanggup menarik perhatian pengunjung atau user.
Carousel atau slideshow biasanya dipakai untuk menampilkan konten yang diprioritaskan ibarat iklan, artikel, product jualan dan lain sebagainya.
Melalui tutorial ini kita akan mempelajari secara detail perihal bagaimana cara menciptakan Carousel atau slideshow dengan memakai Bootstrap, sehingga nantinya sanggup menyebarkan teknik yang lebih baik lagi dalam pembuatan Carousel
Catatan : Penggunaan Carousel pada Bootstrap, memerlukan jQuery dan Bootstrap Javascript.
Berikut referensi 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

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

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 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/AVvXsEixuZKo4rpPVcxiPPShS-hccoGPzq7oMO8A_HHe1-WIrMk53QP5BPeOZ3arIl-JakWhhC1gaOHjaAvOEM_BpJ_ymOW4vplcjUBXhkNPLfi3_R8F5rvybTYTWA3rTD3MtRsT3LlFPEQ1XJV5/s1600/ts-holder-1.png" alt=" Carousel yang juga dikenal dengan slideshow  Bootstrap 3 Carousel - Tutorial Bootstrap Indonesia">     </div>      <div class="item">       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ylKCjmucSjYeC5wK7Whbr9X0nqiONomS_emknhSyZyyqd11r2dn11rCeLPmvgLyVVPRZMN36CBtBZjl0-g4QTXvO-Z3NZGz8SEbe-KfNTLiuk4radsA9X1BxxX5SXuolI66X1n_13OXF/s1600/ts-holder-2.png" alt=" Carousel yang juga dikenal dengan slideshow  Bootstrap 3 Carousel - Tutorial Bootstrap Indonesia">     </div>      <div class="item">       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOkk5xT9W3hWT89G7WnhMaDJsp64AHtGstipv6wuHHX1wwQAXVCItros12GxhTJSsR1o418YPG8d8mx6KFSGDjNMMDVVi1USJYyLS1qI8_QIc9CN6qGD9ntqe_Ay2vIk19ylr4z9Wr2R_t/s1600/ts-holder-3.png" alt=" Carousel yang juga dikenal dengan slideshow  Bootstrap 3 Carousel - Tutorial Bootstrap Indonesia">     </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>
Apa itu indikator pada Carousel ? indikator carousel artinya bilah / bidang yang dipakai sebagai gosip status slide yang sedang aktif sekaligus menjadi kontrol.
Apa itu Kontrol pada Carousel ? Kontrol carousel artinya sebagai element pemicu yang sanggup dilakukan oleh user atau pengguna dalam menggerakkan atau memindah slide, misalnya ibarat tombol selanjutnya dan tombol sebelumnya
Untuk menjalankan fungsi indikator dan kontrol pada Carousel, element utama dari Carousel wajib mempunyai attribute ID unik. Hal ini dipakai sebagai patokan javascript bootstrap dalam melaksanakan fungsinya.
Berikut referensi 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 :

  1. 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.
  2. data-slide-to="0" berfungsi sebagai sasaran slide yang akan buka. Cara menentukannya yaitu dengan menghitung jumlah element dengan class .item
    • Misal ; bila data-slide-to = 0, maka item targetnya yaitu 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.
  3. .active pada baris ke 4 dipakai 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/AVvXsEixuZKo4rpPVcxiPPShS-hccoGPzq7oMO8A_HHe1-WIrMk53QP5BPeOZ3arIl-JakWhhC1gaOHjaAvOEM_BpJ_ymOW4vplcjUBXhkNPLfi3_R8F5rvybTYTWA3rTD3MtRsT3LlFPEQ1XJV5/s1600/ts-holder-1.png" alt=" Carousel yang juga dikenal dengan slideshow  Bootstrap 3 Carousel - Tutorial Bootstrap Indonesia">     </div>      <div class="item">       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ylKCjmucSjYeC5wK7Whbr9X0nqiONomS_emknhSyZyyqd11r2dn11rCeLPmvgLyVVPRZMN36CBtBZjl0-g4QTXvO-Z3NZGz8SEbe-KfNTLiuk4radsA9X1BxxX5SXuolI66X1n_13OXF/s1600/ts-holder-2.png" alt=" Carousel yang juga dikenal dengan slideshow  Bootstrap 3 Carousel - Tutorial Bootstrap Indonesia">     </div>      <div class="item">       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOkk5xT9W3hWT89G7WnhMaDJsp64AHtGstipv6wuHHX1wwQAXVCItros12GxhTJSsR1o418YPG8d8mx6KFSGDjNMMDVVi1USJYyLS1qI8_QIc9CN6qGD9ntqe_Ay2vIk19ylr4z9Wr2R_t/s1600/ts-holder-3.png" alt=" Carousel yang juga dikenal dengan slideshow  Bootstrap 3 Carousel - Tutorial Bootstrap Indonesia">     </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>
Berikut referensi 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

  1. .carousel-control nama class dasar untuk kontrol carousel
  2. .left mengatur posisi berada dikiri
  3. href="#tes-carousel" menyesuaikan dengan Attribute ID yang yang digunakan, sanggup dilihat pada susunan code yang berstabilo
  4. data-slide="prev" (Previous/Sebelumnya) wajib untuk ditulis untuk dihukum oleh Bootstrap JavaScript
  5. .right mengatur posisi berada dikanan
  6. data-slide="next" (Next/Selanjutnya) wajib untuk ditulis untuk dihukum 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/AVvXsEixuZKo4rpPVcxiPPShS-hccoGPzq7oMO8A_HHe1-WIrMk53QP5BPeOZ3arIl-JakWhhC1gaOHjaAvOEM_BpJ_ymOW4vplcjUBXhkNPLfi3_R8F5rvybTYTWA3rTD3MtRsT3LlFPEQ1XJV5/s1600/ts-holder-1.png" alt=" Carousel yang juga dikenal dengan slideshow  Bootstrap 3 Carousel - Tutorial Bootstrap Indonesia">     </div>      <div class="item">       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ylKCjmucSjYeC5wK7Whbr9X0nqiONomS_emknhSyZyyqd11r2dn11rCeLPmvgLyVVPRZMN36CBtBZjl0-g4QTXvO-Z3NZGz8SEbe-KfNTLiuk4radsA9X1BxxX5SXuolI66X1n_13OXF/s1600/ts-holder-2.png" alt=" Carousel yang juga dikenal dengan slideshow  Bootstrap 3 Carousel - Tutorial Bootstrap Indonesia">     </div>      <div class="item">       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOkk5xT9W3hWT89G7WnhMaDJsp64AHtGstipv6wuHHX1wwQAXVCItros12GxhTJSsR1o418YPG8d8mx6KFSGDjNMMDVVi1USJYyLS1qI8_QIc9CN6qGD9ntqe_Ay2vIk19ylr4z9Wr2R_t/s1600/ts-holder-3.png" alt=" Carousel yang juga dikenal dengan slideshow  Bootstrap 3 Carousel - Tutorial Bootstrap Indonesia">     </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>
<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/AVvXsEixuZKo4rpPVcxiPPShS-hccoGPzq7oMO8A_HHe1-WIrMk53QP5BPeOZ3arIl-JakWhhC1gaOHjaAvOEM_BpJ_ymOW4vplcjUBXhkNPLfi3_R8F5rvybTYTWA3rTD3MtRsT3LlFPEQ1XJV5/s1600/ts-holder-1.png" alt=" Carousel yang juga dikenal dengan slideshow  Bootstrap 3 Carousel - Tutorial Bootstrap Indonesia">     </div>      <div class="item">       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ylKCjmucSjYeC5wK7Whbr9X0nqiONomS_emknhSyZyyqd11r2dn11rCeLPmvgLyVVPRZMN36CBtBZjl0-g4QTXvO-Z3NZGz8SEbe-KfNTLiuk4radsA9X1BxxX5SXuolI66X1n_13OXF/s1600/ts-holder-2.png" alt=" Carousel yang juga dikenal dengan slideshow  Bootstrap 3 Carousel - Tutorial Bootstrap Indonesia">     </div>      <div class="item">       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOkk5xT9W3hWT89G7WnhMaDJsp64AHtGstipv6wuHHX1wwQAXVCItros12GxhTJSsR1o418YPG8d8mx6KFSGDjNMMDVVi1USJYyLS1qI8_QIc9CN6qGD9ntqe_Ay2vIk19ylr4z9Wr2R_t/s1600/ts-holder-3.png" alt=" Carousel yang juga dikenal dengan slideshow  Bootstrap 3 Carousel - Tutorial Bootstrap Indonesia">     </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>
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/AVvXsEixuZKo4rpPVcxiPPShS-hccoGPzq7oMO8A_HHe1-WIrMk53QP5BPeOZ3arIl-JakWhhC1gaOHjaAvOEM_BpJ_ymOW4vplcjUBXhkNPLfi3_R8F5rvybTYTWA3rTD3MtRsT3LlFPEQ1XJV5/s1600/ts-holder-1.png" alt=" Carousel yang juga dikenal dengan slideshow  Bootstrap 3 Carousel - Tutorial Bootstrap Indonesia"/>       <!-- 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/AVvXsEi2ylKCjmucSjYeC5wK7Whbr9X0nqiONomS_emknhSyZyyqd11r2dn11rCeLPmvgLyVVPRZMN36CBtBZjl0-g4QTXvO-Z3NZGz8SEbe-KfNTLiuk4radsA9X1BxxX5SXuolI66X1n_13OXF/s1600/ts-holder-2.png" alt=" Carousel yang juga dikenal dengan slideshow  Bootstrap 3 Carousel - Tutorial Bootstrap Indonesia"/>       <!-- 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/AVvXsEhOkk5xT9W3hWT89G7WnhMaDJsp64AHtGstipv6wuHHX1wwQAXVCItros12GxhTJSsR1o418YPG8d8mx6KFSGDjNMMDVVi1USJYyLS1qI8_QIc9CN6qGD9ntqe_Ay2vIk19ylr4z9Wr2R_t/s1600/ts-holder-3.png" alt=" Carousel yang juga dikenal dengan slideshow  Bootstrap 3 Carousel - Tutorial Bootstrap Indonesia"/>       <!-- 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>
<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/AVvXsEixuZKo4rpPVcxiPPShS-hccoGPzq7oMO8A_HHe1-WIrMk53QP5BPeOZ3arIl-JakWhhC1gaOHjaAvOEM_BpJ_ymOW4vplcjUBXhkNPLfi3_R8F5rvybTYTWA3rTD3MtRsT3LlFPEQ1XJV5/s1600/ts-holder-1.png" alt=" Carousel yang juga dikenal dengan slideshow  Bootstrap 3 Carousel - Tutorial Bootstrap Indonesia"/>       <!-- 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/AVvXsEi2ylKCjmucSjYeC5wK7Whbr9X0nqiONomS_emknhSyZyyqd11r2dn11rCeLPmvgLyVVPRZMN36CBtBZjl0-g4QTXvO-Z3NZGz8SEbe-KfNTLiuk4radsA9X1BxxX5SXuolI66X1n_13OXF/s1600/ts-holder-2.png" alt=" Carousel yang juga dikenal dengan slideshow  Bootstrap 3 Carousel - Tutorial Bootstrap Indonesia"/>       <!-- 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/AVvXsEhOkk5xT9W3hWT89G7WnhMaDJsp64AHtGstipv6wuHHX1wwQAXVCItros12GxhTJSsR1o418YPG8d8mx6KFSGDjNMMDVVi1USJYyLS1qI8_QIc9CN6qGD9ntqe_Ay2vIk19ylr4z9Wr2R_t/s1600/ts-holder-3.png" alt=" Carousel yang juga dikenal dengan slideshow  Bootstrap 3 Carousel - Tutorial Bootstrap Indonesia"/>       <!-- 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>