carousel + bottom list with thumbnails

by Daniel Mejia

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid" id="carousel-section">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://www.w3schools.com/bootstrap/img_flower2.jpg" alt="">
      </div>

      <div class="item">
        <img src="http://www.w3schools.com/bootstrap/img_flower2.jpg" alt="">
      </div>

      <div class="item">
        <img src="http://www.w3schools.com/bootstrap/img_flower2.jpg" alt="" />
      </div>

    </div>

    <!-- Left and right 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 class="more-section container-fluid">
  <div class=row>
    <div class="gallery">
      <div class="thumbnail">
        <img src="http://lorempixel.com/1024/728" alt="">
      </div>
      <div class="thumbnail">
        <img src="http://lorempixel.com/1024/728" alt="">
      </div>
      <div class="thumbnail">
        <img src="http://lorempixel.com/1024/728" alt="">
      </div>
      <div class="thumbnail">
        <img src="http://lorempixel.com/1024/728"...

CSS

body {
  background-color: #2f2f2f;
	height:100%;
	width:100%;
	margin:0;
}

#myCarousel > .carousel-inner > .item
{
	max-height:80%;
}

#myCarousel img {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#myCarousel {
  max-height: 70%;
}

.more-section {
  //display:none;
  position: absolute;
  bottom: 0;
  top: auto;
  height: 20%;
  width: 100%;
  z-order: 5;
  background-color: #333;
  overflow-y: auto;
}

.thumbnail {
  max-height: 50px;
  float: left;
  margin: 15px;
}

.thumbnail img {
  max-height: 40px;
}