title: carousel with thumbnails with bootstrap v4
body: <p>I saw a demo of carousel with thumbnails with <code>bootstrap 3</code> <a href="http://jsfiddle.net/talmand/JS6JV/" rel="nofollow noreferrer">here</a>.</p>
  <p>I am trying to implement the same for bootstrap v4, but could not figure out how to fix some of UI nitty gritty like left/right shadow coming over whole height including thumbnails as well. <a href="http://jsfiddle.net/9ya9hjc2/" rel="nofollow noreferrer">Here</a> is the fiddle with v4.</p>
  <p>Following is HTML code:</p>
  <pre><code>&lt;div id='carousel-custom' class='carousel slide' data-ride='carousel'&gt;
      &lt;!-- Wrapper for slides --&gt;
      &lt;div class='carousel-inner'&gt;
          &lt;div class='carousel-item active'&gt;
              &lt;img src='http://placehold.it/400x200&amp;text=slide1' alt='' /&gt;
          &lt;/div&gt;
          &lt;div class='carousel-item'&gt;
              &lt;img src='http://placehold.it/400x200&amp;text=slide2' alt='' /&gt;
          &lt;/div&gt;
          &lt;div class='carousel-item'&gt;
              &lt;img src='http://placehold.it/400x200&amp;text=slide3' alt='' /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Controls --&gt;
      &lt;a class='left carousel-control' href='#carousel-custom' data-slide='prev'&gt;
          &lt;span class='glyphicon glyphicon-chevron-left'&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class='right carousel-control' href='#carousel-custom' data-slide='next'&gt;
          &lt;span class='glyphicon glyphicon-chevron-right'&gt;&lt;/span&gt;
      &lt;/a&gt;
  
      &lt;!-- Indicators --&gt;
      &lt;ol class='carousel-indicators'&gt;
          &lt;li data-target='#carousel-custom' data-slide-to='0' class='active'&gt;&lt;img
                  src='http://placehold.it/100x50&amp;text=slide1' alt='' /&gt;&lt;/li&gt;
          &lt;li data-target='#carousel-custom' data-slide-to='1'&gt;&lt;img src='http://placehold.it/100x50&amp;text=slide2' alt='' /&gt;
          &lt;/li&gt;
          &lt;li data-target='#carousel-custom' data-slide-to='2'&gt;&lt;img src='http://placehold.it/100x50&amp;text=slide3' alt='' /&gt;
          &lt;/li&gt;
      &lt;/ol&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS Changes:</p>
  <pre><code>#carousel-example-generic {
      margin: 20px auto;
      width: 400px;
  }
  
  #carousel-custom {
      margin: 20px auto;
      width: 400px;
  }
  #carousel-custom .carousel-indicators {
      margin: 10px 0 0;
      overflow: auto;
      position: static;
      text-align: left;
      white-space: nowrap;
      width: 100%;
  }
  #carousel-custom .carousel-indicators li {
      background-color: transparent;
      -webkit-border-radius: 0;
      border-radius: 0;
      display: inline-block;
      height: auto;
      margin: 0 !important;
      width: auto;
  }
  #carousel-custom .carousel-indicators li img {
      display: block;
      opacity: 0.5;
  }
  #carousel-custom .carousel-indicators li.active img {
      opacity: 1;
  }
  #carousel-custom .carousel-indicators li:hover img {
      opacity: 0.75;
  }
  </code></pre>