carousel with thumbnails with bootstrap v4 - html

Question

I saw a demo of carousel with thumbnails with bootstrap 3 here.
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. Here is the fiddle with v4.
Following is HTML code:
<div id='carousel-custom' class='carousel slide' data-ride='carousel'>
<!-- Wrapper for slides -->
<div class='carousel-inner'>
<div class='carousel-item active'>
<img src='http://placehold.it/400x200&text=slide1' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide2' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide3' alt='' />
</div>
</div>
<!-- Controls -->
<a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
<span class='glyphicon glyphicon-chevron-left'></span>
</a>
<a class='right carousel-control' href='#carousel-custom' data-slide='next'>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<!-- Indicators -->
<ol class='carousel-indicators'>
<li data-target='#carousel-custom' data-slide-to='0' class='active'><img
src='http://placehold.it/100x50&text=slide1' alt='' /></li>
<li data-target='#carousel-custom' data-slide-to='1'><img src='http://placehold.it/100x50&text=slide2' alt='' />
</li>
<li data-target='#carousel-custom' data-slide-to='2'><img src='http://placehold.it/100x50&text=slide3' alt='' />
</li>
</ol>
</div>
CSS Changes:
#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;
}

Answer 1

For Bootstrap 4 it may be easier to use list-inline for the slider thumbnails and you won't need as much extra CSS.
<div class="col-lg-6 offset-lg-3" id="slider">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item carousel-item" data-slide-number="0">
<img src="http://placehold.it/1200x480&text=one" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="1">
<img src="http://placehold.it/1200x480/888/FFF" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="2">
<img src="http://placehold.it/1200x480&text=three" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="3">
<img src="http://placehold.it/1200x480&text=four" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="4">
<img src="http://placehold.it/1200x480&text=five" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="5">
<img src="http://placehold.it/1200x480&text=six" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="6">
<img src="http://placehold.it/1200x480&text=seven" class="img-fluid">
</div>
<div class="item carousel-item" data-slide-number="7">
<img src="http://placehold.it/1200x480&text=eight" class="img-fluid">
</div>
<a class="carousel-control left pt-3" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<a class="carousel-control right pt-3" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>
</div>
<ul class="carousel-indicators list-inline">
<li class="list-inline-item active">
<a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=one" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=two" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-2" data-slide-to="2" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=three" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-3" data-slide-to="3" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=four" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-4" data-slide-to="4" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=five" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-5" data-slide-to="5" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=six" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-6" data-slide-to="6" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=seven" class="img-fluid">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-7" data-slide-to="7" data-target="#myCarousel">
<img src="http://placehold.it/80x60&text=eight" class="img-fluid">
</a>
</li>
</ul>
</div>
</div>
https://codeply.com/go/tBbcVXe1xZ

Answer 2

If you move your controls into the .carousel-inner element, it won't stretch down through the thumbnails:
<div class='carousel-inner'>
<div class='carousel-item active'>
<img src='http://placehold.it/400x200&text=slide1' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide2' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide3' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide4' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide5' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide6' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide7' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide8' alt='' />
</div>
<div class='carousel-item'>
<img src='http://placehold.it/400x200&text=slide9' alt='' />
</div>
<!-- Controls -->
<a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
<span class='glyphicon glyphicon-chevron-left'></span>
</a>
<a class='right carousel-control' href='#carousel-custom' data-slide='next'>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
</div>
Here's your updated fiddle showing this: JSFiddle