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

kansas city airport shuttle

Kansas City Airport Shuttle is the premier Airport Transportation service in Kansas City. Kansas City Airport Car Service provides Kansas City travelers transportation to and from Kansas City International Airport, Lawrence, Topeka, Manhattan, Fort Riley, and Junction City Kansas.

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
trackback

[…] Next Filed Under: Filed Under:Bootstrap, Bootstrap Examples, GeneralTagged With: Tagged With:Bootstrap Carousel Example Free Download […]