carousel with thumbnails with bootstrap v4

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&amp;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&amp;text=three" class="img-fluid">
      </div>
      <div class="item carousel-item" data-slide-number="3">
        <img src="http://placehold.it/1200x480&amp;text=four" class="img-fluid">
      </div>
      <div class="item carousel-item" data-slide-number="4">
        <img src="http://placehold.it/1200x480&amp;text=five" class="img-fluid">
      </div>
      <div class="item carousel-item" data-slide-number="5">
        <img src="http://placehold.it/1200x480&amp;text=six" class="img-fluid">
      </div>
      <div class="item carousel-item" data-slide-number="6">
        <img src="http://placehold.it/1200x480&amp;text=seven" class="img-fluid">
      </div>
      <div class="item carousel-item" data-slide-number="7">
        <img src="http://placehold.it/1200x480&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;text=eight" class="img-fluid">
        </a>
      </li>
    </ul>
  </div>
</div>

https://codeply.com/go/tBbcVXe1xZ

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