search

Cara menggunakan bootstrap carousel product slider

1 years ago
Komentar: 0
Dibaca: 102

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

Show

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.

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

  1. <!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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
    3 : merupakan class dasar dalam pembuatan carousel pada bootstrap. Dapat dilihat pada baris [1]
  2. <!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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
    4 : digunakan untuk menambahkan efek transisi dan animasi css pada saat perpindah slide. Abaikan class ini jika tidak menginginkan adanya efek transisi dan animasi.
  3. <!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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
    5 Digunakan untuk mengaktifkan carousel slider otomatis tanpa perlu adanya interaksi dari user
  4. <!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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
    6 digunakan sebagai class pembuat daftar dari slider, gunakan element 
    <!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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
    7 untuk menggunakannya, lalu masukkan gambar didalam area ini. Secara default class 
    <!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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
    6 tanpa diiringi class 
    <!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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
    9 mempunyai tampilan tidak terlihat
  5. <!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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
    9 untuk menampilkan daftar yang terlihat, baik secara default atau maupun pada saat 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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
Uji coba

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 

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>
1 unik. Hal ini digunakan sebagai patokan javascript bootstrap dalam melakukan fungsinya.

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 :

  1. 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>
    2 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. 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>
    3 berfungsi sebagai target slide yang akan buka. Cara menentukannya adalah dengan menghitung jumlah element dengan class 
    <!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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
    6
    • Misal ; jika 
      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>
      5, maka item targetnya adalah yang pertama, Contoh diatas pada element div
    • jika 
      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>
      6 maka item targetnya yang kedua, Contoh diatas pada element div
    • dan seterusnya.
  3. <!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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
    9 pada digunakan sebagai menampilkan indikator sedang aktif. Nama class ini menyesuaikan dengan element 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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
    6 yang mempunyai class 
    <!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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
    9 pada

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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
Uji coba

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

  1. <!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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
    0 nama class dasar untuk kontrol carousel
  2. <!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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
    1 mengatur posisi berada dikiri
  3. <!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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
    2 menyesuaikan dengan Attribute ID yang yang digunakan, dapat dilihat pada susunan code yang berstabilo
  4. <!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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
    3 (Previous/Sebelumnya) wajib untuk ditulis untuk dieksekusi oleh Bootstrap JavaScript
  5. <!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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
    4 mengatur posisi berada dikanan
  6. <!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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
    5 (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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
Uji coba

<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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
Uji coba

Untuk menambahkan sebuah caption pada slide gunakan element HTML 

<!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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
7 dengan class 
<!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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
7, letakkan didalam element daftar slide yang mempunyai class 
<!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://2.bp.blogspot.com/-Uskxbx5SVRA/WmPeb614cWI/AAAAAAAABag/I7YOYO9RndUC_waLCJqtsPaagYUGQ3x9gCLcBGAs/s1600/ts-holder-1.png" alt="Demo 1">
    </div>

    <div class="item">
      <img src="https://1.bp.blogspot.com/-grnESdXufh0/WmPebw5hnqI/AAAAAAAABao/14ayf_GP5xYmLK2Zs0axN0JGIOevWFB2QCLcBGAs/s1600/ts-holder-2.png" alt="Demo 2">
    </div>

    <div class="item">
      <img src="https://3.bp.blogspot.com/-R9nLK8bxp6E/WmPebnN9FwI/AAAAAAAABak/0h_rVaQ7XDIGSTKKrNUU60F6BctsmxuFQCLcBGAs/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>
6, berikut cara penulisannya :

Seperti yang kita ketahui, Bootstrap Carousel adalah sebuah slideshow yang secara bergantian menampilkan sebuah gambar.

Apa itu slider gambar?

Slider atau carousel merupakan satu di antara beberapa fitur website yang sering digunakan. Fitur ini akan menampilkan gambar yang berganti secara otomatis atau ketika Anda melakukan klik, maka gambar akan melakukan transisi dengan sendirinya. Anda mungkin lebih mengenal fitur ini dengan nama slideshow.

kode bootstrap

Pos Terkait

Bagaimana saya bisa memperbaiki mysql?
Bagaimana saya bisa memperbaiki mysql?

Cara melihat kode javascript di chrome
Cara melihat kode javascript di chrome

Grup kompas mongodb dengan beberapa kolom
Grup kompas mongodb dengan beberapa kolom

Face reset auto increment di phpmyadmin
Face reset auto increment di phpmyadmin

Dapatkah Anda memanggil rest api dari google sheets?
Dapatkah Anda memanggil rest api dari google sheets?

Cara menggunakan RANDOM.COM di JavaScript
Cara menggunakan RANDOM.COM di JavaScript

Gara Menggunagan Pip Tomato Document Innertmal
Gara Menggunagan Pip Tomato Document Innertmal

Cara menggunakan DICTORNAERY pada Python
Cara menggunakan DICTORNAERY pada Python

Penggunaan fungsi ARRAYS pada PHP
Penggunaan fungsi ARRAYS pada PHP

Python menaikkan pengecualian di blok coba
Python menaikkan pengecualian di blok coba

Periklanan

BERITA TERKINI

Bisakah Anda mengaktifkan javascript di ponsel?
1 years ago . by AdorableMantra
Bagaimana Anda menghapus teks duplikat dengan python?
1 years ago . by DecreasingEmperor
Cara menghapus latar belakang video di CapCut
1 years ago . by SkepticalDugout
Apa itu rounddown dalam excel?
1 years ago . by JollyDollar
Dapatkan array multidimensi kunci php
1 years ago . by LuridRecognition
Cara mengeluarkan darah haid yang tidak keluar
1 years ago . by CuriousRedundancy
Dapatkan javascript bulan dengan 0
1 years ago . by NastyMedics
Python cetak daftar daftar secara vertikal
1 years ago . by DeviantColors
Cara membersihkan kacamata yang tergores
1 years ago . by Two-storyDealing
Cara menggunakan variable to dataframe python
1 years ago . by ThrobbingMetaphysics

Toplist Popular

#1
Top 10 berikut ini yang bukan merupakan penetapan tujuan visi perusahaan adalah 2022
1 years ago
#2
Top 10 sebuah bak air berbentuk balok dengan ukuran panjang 40 cm, lebar 30 cm, dan tinggi 35 cm 2022
1 years ago
#3
Top 9 banjir bukan sekadar bencana alam paragraf 3 gagasan utama 2022
1 years ago
#4
Top 10 diketahui himpunan himpunan sebagai berikut p bilangan ganjil yang kurang dari 15 2022
1 years ago
#5
Top 10 penyelesaian dari persamaan 3x 2 y 9 dan 2x y 3 adalah 2022
1 years ago
#6
Top 10 bagaimana cara memberi salam kepada orang tua dan guru yang benar brainly 2022
1 years ago
#7
Top 10 semakin tinggi nilai toleransi semakin tinggi nilai integrasi nasional 2022
1 years ago
#8
Top 10 benda kerajinan tidak boleh membahayakan pemakainya maka benda kerajinan memiliki prinsip 2022
1 years ago
#9
Top 9 bagian tutup sumbat termos biasanya terbuat dari benda berjenis brainly 2022
1 years ago
#10
Top 9 pernyataan yang sesuai dengan prinsipteori evolusi jb lamarck ditunjukkan oleh angka 2022
1 years ago

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social

homeenfritzhtrjako
Copyright © 2024 idkuu.com Inc.