CodePen Embed - Bootstrap4 Thumbnail-Carousel

<!-- Main-Slideelement -->
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block" src="https://s14.postimg.cc/bnwpgsqnl/pixel1.png" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block" src="https://s14.postimg.cc/k665l54w1/pixel2.png" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block" src="https://s14.postimg.cc/4xg87dycx/pixel5.png" alt="Third slide">
    </div>
    <div class="carousel-item">
      <img class="d-block" src="https://s14.postimg.cc/4kou178dd/pixel3.png" alt="Fourth slide">
    </div>
    <div class="carousel-item">
      <img class="d-block" src="https://s14.postimg.cc/almiy9n9t/pixel4.png" alt="Fifth slide">
    </div>
  </div>
</div>

<!-- Main-Slider-Element ends -->
<!-- Thumb-Slider-Element starts -->
<div id="thumbSlider" class="carousel slide" data-interval="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="row">
        <div data-target="#myCarousel" data-slide-to="0" class="thumb col-sm-4 active">
          <img src="https://s14.postimg.cc/z24osq8kt/pixel1.png" alt="XZ">
        </div>
        <div data-target="#myCarousel" data-slide-to="1" class="thumb col-sm-4">
          <img src="https://s14.postimg.cc/l8gc3onp9/pixel2.png" alt="XZ">
        </div>
        <div data-target="#myCarousel" data-slide-to="2" class="thumb col-sm-4">
          <img src="https://s14.postimg.cc/8ttk3djcd/pixel5.png" alt="XZ">
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="row">
        <div data-target="#myCarousel" data-slide-to="3" class="thumb col-sm-4">
          <img src="https://s14.postimg.cc/4kou178d9/pixel3.png" alt="XZ">
        </div>
        <div data-target="#myCarousel" data-slide-to="4" class="thumb col-sm-4">
          <img src="https://s14.postimg.cc/almiy9n9t/pixel4.png" alt="XZ">
        </div>
        <div data-target="#myCarousel" data-slide-to="5" class="thumb col-sm-4">
          <img src="https://s14.postimg.cc/z24osq8kt/pixel1.png" alt="XZ">
        </div>
        
      </div>
    </div>
    <a class="carousel-control-prev" href="#thumbSlider" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#thumbSlider" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  
</div>
<!-- Thumb-Slider-Element ends -->

#myCarousel {
  img {
    height: 50%;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

#thumbSlider {
  .carousel-inner {
    padding-left: 3rem;
    padding-right: 3rem;
    
    .row {
      overflow: hidden;
    }
    
    .thumb {
      &:hover {
        cursor: pointer;
      }
      &.active img {
        opacity: 1;
      }
    }
    
    img {
      height: 150px;
      margin-left: auto;
      margin-right: auto;
      display: block;
      opacity: .5;
      
      &:hover {
        opacity: 1;
      }
    }
    
    .carousel-control-prev-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000'%20viewBox='0%200%208%208'%3E%3Cpath%20d='M5.25%200l-4%204%204%204%201.5-1.5-2.5-2.5%202.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
    }
    .carousel-control-next-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000'%20viewBox='0%200%208%208'%3E%3Cpath%20d='M2.75%200l-1.5%201.5%202.5%202.5-2.5%202.5%201.5%201.5%204-4-4-4z'/%3E%3C/svg%3E");
    }
  }
}

View Compiled

$(document).ready(function(){
  // active thumbnail
  $("#thumbSlider .thumb").on("click", function(){
      $(this).addClass("active");
      $(this).siblings().removeClass("active");
    
    });
})

This Pen is owned by aholics on CodePen.

See more by @aholics on CodePen

External CSS

https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css

External CSS

External JavaScript