<div class="container py-5 d-flex justify-content-center">
  <div class="bsct-wrap">
    <div id="bsctCarousel" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner rounded">
        <div class="carousel-item active"><img src="https://picsum.photos/id/1018/800/450" class="d-block w-100" alt="Slide 1"></div>
        <div class="carousel-item"><img src="https://picsum.photos/id/1022/800/450" class="d-block w-100" alt="Slide 2"></div>
        <div class="carousel-item"><img src="https://picsum.photos/id/1039/800/450" class="d-block w-100" alt="Slide 3"></div>
        <div class="carousel-item"><img src="https://picsum.photos/id/1052/800/450" class="d-block w-100" alt="Slide 4"></div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#bsctCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#bsctCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
      </button>
    </div>

    <div class="d-flex gap-2 mt-3 justify-content-center" id="bsctThumbs">
      <img src="https://picsum.photos/id/1018/120/80" class="bsct-thumb active" data-index="0" alt="Thumbnail 1">
      <img src="https://picsum.photos/id/1022/120/80" class="bsct-thumb" data-index="1" alt="Thumbnail 2">
      <img src="https://picsum.photos/id/1039/120/80" class="bsct-thumb" data-index="2" alt="Thumbnail 3">
      <img src="https://picsum.photos/id/1052/120/80" class="bsct-thumb" data-index="3" alt="Thumbnail 4">
    </div>
  </div>
</div>

.bsct-wrap { width: 100%; max-width: 720px; }
.bsct-thumb {
  width: 90px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  border: 3px solid transparent;
  opacity: 0.7;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.bsct-thumb:hover { opacity: 1; }
.bsct-thumb.active { border-color: #0d6efd; opacity: 1; }

const carouselEl = document.getElementById('bsctCarousel');
const carousel = bootstrap.Carousel.getOrCreateInstance(carouselEl);
const thumbs = Array.from(document.querySelectorAll('.bsct-thumb'));

function setActiveThumb(index) {
  thumbs.forEach(t => t.classList.toggle('active', Number(t.dataset.index) === index));
}

thumbs.forEach(thumb => {
  thumb.addEventListener('click', () => {
    const index = Number(thumb.dataset.index);
    // to() is Bootstrap's own Carousel API for jumping straight to a slide
    // index, rather than simulating repeated next()/prev() calls.
    carousel.to(index);
    setActiveThumb(index);
  });
});

// Bootstrap fires 'slid.bs.carousel' with the new slide index whenever the
// active slide changes, whether from a thumbnail click, the Prev/Next
// controls, or the carousel's own auto-advance timer.
carouselEl.addEventListener('slid.bs.carousel', event => {
  setActiveThumb(event.to);
});