Cara Membuat Carousel dengan Thumbnail Pada Bootstrap

Halo, jumpa lagi dengan saya, kali ini saya akan membuat tutorial mengenai Cara Membuat Carousel Dengan Thumbnail Pada Bootstrap, Nah kalo biasa nya kita hanya bisa membuat slider carousel pada bootstrap, kali ini saya akan buat dengan thumbnailnya, seperti apa cara membuatnya, simak langkah-langkahnya berikut ini.

Langsung saja, kalian siapkan file bootstrap nya, kemudian salin kode berikut ini.

<div class="container">
  
  <div class="row" id="slider">
    <div class="col-md-12">
      <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
          <div class="active item" data-slide-number="0">
            <img src="http://placehold.it/1200x480&amp;text=1">
          </div>
          <div class="item" data-slide-number="1">
            <img src="http://placehold.it/1200x480&amp;text=2">
          </div>
          <div class="item" data-slide-number="2">
            <img src="http://placehold.it/1200x480&amp;text=3">
          </div>
          <div class="item" data-slide-number="3">
            <img src="http://placehold.it/1200x480&amp;text=4">
          </div>
          <div class="item" data-slide-number="4">
            <img src="http://placehold.it/1200x480&amp;text=5">
          </div>
        </div>
        
        <!-- Controls-->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
        
      </div>
    </div>
  </div>
  
  <div class="row">
    <div class="col-md-12" id="slider-thumbs">
      <ul class="list-inline">
        <li>
          <a id="carousel-thumb-0" class="selected">
            <img src="http://placehold.it/80x60&amp;text=1">
          </a>
        </li>
        <li>
          <a id="carousel-thumb-1">
            <img src="http://placehold.it/80x60&amp;text=2">
          </a>
        </li>
        <li>
          <a id="carousel-thumb-2">
            <img src="http://placehold.it/80x60&amp;text=3">
          </a>
        </li>
        <li>
          <a id="carousel-thumb-3">
            <img src="http://placehold.it/80x60&amp;text=4">
          </a>
        </li>
        <li>
          <a id="carousel-thumb-4">
            <img src="http://placehold.it/80x60&amp;text=5">
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Pada bagian img silahkan kalian bisa isikan gambar sesuai keinginan, setelah itu silahkan kalian salinkan kode CSS berikut.

@import "compass/css3";

.list-inline {
  text-align: center;
  
  > li {
    margin: 10px 5px;
    padding: 0;
    
    &:hover {
      cursor: pointer;      
    }
  }
  
  .selected img {
    opacity: 1;
    border-radius: 15px;
  }
    
  img {
    opacity: 0.5;
    transition: all .5s ease;

    &:hover {
      opacity: 1;
    }
  }
}

.item > img {
  /*@extend .img-responsive;*/
  max-width: 100%;
  height: auto;
  display: block;
}

Pada kode CSS3 ini akan memberikan efek rounded atau kelengkungan pada thumbnail, kemudian yang terakhir salin kode Javascript berikut ini.

$('#myCarousel').carousel({
	interval: 3500
});

$('#myCarousel').on('slide.bs.carousel', function (e) {
    var id = $('.item.active').data('slide-number');
		
  	// Added a statement to make sure the carousel loops correct
		if(e.direction == 'right'){
	    id = parseInt(id) - 1;  
      if(id == -1) id = 7;
    } else{
        id = parseInt(id) + 1;
        if(id == $('[id^=carousel-thumb-]').length) id = 0;
    }
  
    $('[id^=carousel-thumb-]').removeClass('selected');
    $('[id=carousel-thumb-' + id + ']').addClass('selected');
});

// Thumb control
$('[id^=carousel-thumb-]').click( function(){
  var id_selector = $(this).attr("id");
  var id = id_selector.substr(id_selector.length -1);
  id = parseInt(id);
  $('#myCarousel').carousel(id);
  $('[id^=carousel-thumb-]').removeClass('selected');
  $(this).addClass('selected');
});

Kalo sudah semua, simpan terlebih dahulu, kemudian jalankan dibrowser masing-masing, dan lihat hasilnya. Selesai

Baik itulah bagaimana Cara Membuat Carousel Dengan Thumbnail Pada Bootstrap, semoga bermanfaat, amin.

Sampai ketemu dilain kesempatan, Selamat mencoba 🙂