Bootstrap carousel with thumbnails slider Example Free Download

In This Article we will learn how to create Bootstrap Carousel with thumbnails slider free download.

HTML

<div class="product-slider">
  <div id="carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="item active"> <img src="1.jpg"> </div>
      <div class="item"> <img src="2.jpg"> </div>
      <div class="item"> <img src="4.jpg"> </div>
    </div>
  </div>
  
  
  <div class="clearfix">
    <div id="thumbcarousel" class="carousel slide" data-interval="false">
      <div class="carousel-inner">
        <div class="item active">
          <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="1.jpg"></div>
          <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="2.jpg"></div>
          <div data-target="#carousel" data-slide-to="2" class="thumb"><img src="4.jpg"></div>
        </div>
      </div>
      <!-- /carousel-inner --> 
     </div>
    <!-- /thumbcarousel --> 
    
  </div>
</div>

CSS

 .product-slider { padding: 45px; }
    .product-slider #carousel { border: 4px solid #1089c0; margin: 0; }
    .product-slider #thumbcarousel { margin: 12px 0 0; padding: 0 45px; }
    .product-slider #thumbcarousel .item { text-align: center; }
    .product-slider #thumbcarousel .item .thumb { border: 4px solid #cecece; width: 20%; margin: 0 2%; display: inline-block; vertical-align: middle; cursor: pointer; max-width: 98px; }

   .product-slider #thumbcarousel .item .thumb:hover { border-color: #1089c0; }
   .product-slider .item img { width: 100%; height: auto; }
   .carousel-control { color: #0284b8; text-align: center; text-shadow: none; font-size: 30px; width: 30px; height: 30px; line-height: 20px; top: 23%; }
   .carousel-control:hover, .carousel-control:focus, .carousel-control:active { color: #333; }
   .carousel-caption, .carousel-control .fa { font: normal normal normal 30px/26px FontAwesome; }
   .carousel-control { background-color: rgba(0, 0, 0, 0); bottom: auto; font-size: 20px; left: 0; position: absolute; top: 30%; width: auto; }
   .carousel-control.right, .carousel-control.left { background-color: rgba(0, 0, 0, 0); background-image: none; }

Download Bootstrap Thumbnail Slider

One Reply to “Bootstrap carousel with thumbnails slider Example Free Download

Leave a Reply

Your email address will not be published. Required fields are marked *