Bootstrap 5 double carousel targeting

Solution for Bootstrap 5 double carousel targeting
is Given Below:

I’ve got a combo carousel that’s mostly working. Basically, I’m using this as a timeline slider. I have 14 dates to display. In addition to thumbnails/indicators, I’m using dates. But because there are so many dates, I need them to display in separate rows, but with only the active row at a time. I’m hoping my code makes it clear what I’m trying to achieve. I had a version that worked in BS 3 at one time, but that page appears to be dead so I can’t see what I did. I only remember that I did basically what’s shown here. When you click the arrow for the next page of thumbnails, the previous ones slide in behind the new ones for some reason. Also, I can’t seem to figure out how to add “shown” to the thumbnail that’s currently targeted in the first carousel. I know is off, probably in the math. I pulled it from somewhere – can’t remember where.

// normalize history carousel height //
var maxHeight = 0;
$("#historyCarousel .carousel-item .date-text").each(function() {
  if ($(this).height() > maxHeight) {
    maxHeight = $(this).height();
  }
});
$("#historyCarousel .carousel-item").height(maxHeight);
//end normalize tab content area height //




// history carousel thumbnail/date control //
            $('#historyCarousel').on('slid.bs.carousel', function (e) {
                var active =$(this).find('.active').index();
                var to = $(e.relatedTarget).index();
                
                $('#thumbcarousel').find('.showing').removeClass('showing');
                $('#thumbcarousel').find('[data-slide-to='+active+']').addClass('showing');
            });
            
            $('#historyCarousel').on('slid.bs.carousel', function (e) {
                var active =$(this).find('.active').index();
                var to = $(e.relatedTarget).index();
                
                if(active == 6 && to == 7) {
                    $('#thumbcarousel').carousel('next');
                }
                if(active == 8 && to == 0) {
                    $('#thumbcarousel').carousel('next');
                }
            });
            // end history carousel thumbnail/date control
/* History Carousel */

#historyCarousel h2 {
  font-weight: 900;
  font-size: 3rem;
}

#historyCarousel .carousel-item .background {
  height: 500px;
}

#historyCarousel .carousel-item .trans-top {
  background-color: rgba(50, 88, 125, .7);
  background-blend-mode: multiply;
  height: 2rem;
  top: 0;
  left: 0;
}

#historyCarousel .carousel-item .background {
  background-size: cover;
  background-position: center center;
}

#historyCarousel .carousel-item h5 {
  font-weight: 600;
  font-size: 3rem;
}

#thumbCarousel {
  margin: -17px 0 0;
  padding: 0 45px;
}

#thumbCarousel .carousel-item .date {
  width: calc(100% / 8);
  display: inline-block;
}

#thumbCarousel .carousel-item .date .circle-indicator {
  background-color: #fff;
  width: 35px;
  height: 35px;
  border-radius: 100%;
  background-color: #fff;
}

#thumbCarousel .carousel-item .date .circle-indicator .circle-interior {
  width: 100%;
  height: 100%;
  opacity: .7;
  background-size: cover;
  background-position: center center;
  border-radius: 100%;
}

#thumbCarousel .carousel-item .date.active .circle-indicator {
  border-style: solid;
  border-width: 3px;
  border-color: #32587d;
  width: 50px;
  height: 50px;
}

#thumbCarousel .date:hover {
  border-color: rgba(255, 255, 255, .5);
  cursor: hand;
}

#thumbCarousel .carousel-control-prev,
#thumbCarousel .carousel-control-next {
  color: #0284b8;
  text-align: center;
  text-shadow: none;
  font-size: 20px;
  width: 30px;
  height: 30px;
  line-height: 20px;
  top: 30%;
  padding: 1%;
}

#thumbCarousel .carousel-control-prev:hover,
#thumbCarousel .carousel-control-prev:focus,
#thumbCarousel .carousel-control-prev:active,
#thumbCarousel .carousel-control-next:hover,
#thumbCarousel .carousel-control-next:focus,
#thumbCarousel .carousel-control-next:active {
  color: #333;
}

#thumbCarousel .carousel-control-prev .fa,
#thumbCarousel .carousel-control-next .fa {
  font: normal normal normal 30px/26px FontAwesome;
}

#thumbCarousel .carousel-control-prev {
  background-color: rgba(0, 0, 0, 0);
  bottom: auto;
  font-size: 20px;
  left: 0;
  position: absolute;
  top: 30%;
  width: 30px;
}

#thumbCarousel .carousel-control-prev {
  background-color: rgba(0, 0, 0, 0);
  background-image: none;
  z-index: 99999;
}

#thumbCarousel .showing {
  font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<link href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div id="historyCarousel" class="container-fluid carousel slide m-0 p-0">

  <div class="carousel-inner">

    <div class="carousel-item active orange-bkg">
      <div class="row jusify-content-center">
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?hippy,flowers');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">1979</h5>
            <p class="pb-5 text-white">text here</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?grunge,music');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">1993</h5>
            <p class="pb-5 text-white">more text here</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?friends,eating');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">1995</h5>
            <p class="pb-5 text-white">text here</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?y2k,celebrate');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">2001</h5>
            <p class="pb-5 text-white">Some more text here</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?babies,cute');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">2005</h5>
            <p class="pb-5 text-white">Text text text</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?rainbow,dogs');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">2007</h5>
            <p class="pb-5 text-white">Text-o-rama</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?bicycle,cats');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">2008</h5>
            <p class="pb-5 text-white">Text goes here</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?computers,bunnies');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">2010</h5>
            <p class="pb-5 text-white">Text TEXT</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?teal,birds');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">2011</h5>
            <p class="pb-5 text-white">It's more text</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?portrait,ocean');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">2014</h5>
            <p class="pb-5 text-white">ACK MORE TEXT</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?flying,butterfly');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">2017</h5>
            <p class="pb-5 text-white">Too many slides</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?trees,snow');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">2018</h5>
            <p class="pb-5 text-white">Are we done yet?</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?mountains,river');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">2020</h5>
            <p class="pb-5 text-white">Just one more</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?paris,love');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">2021</h5>
            <p class="pb-5 text-white">Aaaaand it's done</p>
          </div>
        </div>
      </div>
    </div>

  </div>

</div>
<!-- end HistoryCarousel -->




<!-- Thumbnail Carousel -->
<div id="thumbCarousel" class="carousel slide" data-interval="false">
  <div class="carousel-inner">
    <div class="row carousel-item active d-flex justify-content-center">

      <div data-bs-target="#historyCarousel" data-bs-slide-to="0" class="showing date active px-3 d-inline-block" aria-current="true" aria-label="1979">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?hippy,flowers');"></div>
        </div>
        <div class="circle-date text-center">1979</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="1" class="date px-3 d-inline-block" aria-label="1993">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?grunge,music');"></div>
        </div>
        <div class="circle-date text-center">1993</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="2" class="date px-3 d-inline-block" aria-label="1995">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?friends,eating');"></div>
        </div>
        <div class="circle-date text-center">1995</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="3" class="date px-3 d-inline-block" aria-label="2001">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?y2k,celebrate');"></div>
        </div>
        <div class="circle-date text-center">2001</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="4" class="date px-3 d-inline-block" aria-label="2005">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?babies,cute');"></div>
        </div>
        <div class="circle-date text-center">2005</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="5" class="date px-3 d-inline-block" aria-label="2007">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?rainbow,dogs');"></div>
        </div>
        <div class="circle-date text-center">2007</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="6" class="date px-3 d-inline-block" aria-label="2008">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?bicycle,cats');"></div>
        </div>
        <div class="circle-date text-center">2008</div>
      </div>

    </div>

    <div class="row carousel-item display-content-center">

      <div data-bs-target="#historyCarousel" data-bs-slide-to="7" class="date px-3 d-inline-block" aria-label="2010">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?computers,bunnies');"></div>
        </div>
        <div class="circle-date text-center">2010</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="8" class="date px-3 d-inline-block" aria-label="2011">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?teal,birds');"></div>
        </div>
        <div class="circle-date text-center">2011</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="9" class="date px-3 d-inline-block" aria-label="2014">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?portrait,ocean');"></div>
        </div>
        <div class="circle-date text-center">2014</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="10" class="date px-3 d-inline-block" aria-label="2017">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?flying,butterfly');"></div>
        </div>
        <div class="circle-date text-center">2017</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="11" class="date px-3 d-inline-block" aria-label="2018">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?trees,snow');"></div>
        </div>
        <div class="circle-date text-center">2018</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="12" class="date px-3 d-inline-block" aria-label="2020">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?mountains,river');"></div>
        </div>
        <div class="circle-date text-center">2020</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="13" class="date px-3 d-inline-block" aria-label="2021">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?paris,love');"></div>
        </div>
        <div class="circle-date text-center">2021</div>
      </div>

    </div>
  </div>

  <a class="carousel-control-prev" href="#thumbcarousel" role="button" data-bs-target="#thumbCarousel" data-bs-slide="prev">
    <div class="fa-2x">
      <i class="fas fa-angle-left" data-fa-transform="shrink-8" aria-hidden="true"></i>
    </div>
  </a>
  <a class="carousel-control-next" href="#thumbcarousel" role="button" data-bs-target="#thumbCarousel" data-bs-slide="next">
    <div class="fa-2x">
      <i class="fas fa-angle-right" data-fa-transform="shrink-8" aria-hidden="true"></i>
    </div>
  </a>
</div>
<!-- /thumbcarousel -->

There’s a lot going on with extra CSS and jQuery. I cleaned up the markup and simplified the jQuery event handlers. This should keep the 2 carousels in sync.

$('#thumbCarousel').on('slide.bs.carousel', function (e) {
  // advance main carousel
  var nextSlide = e.to
  $('#myCarousel').carousel(nextSlide*7)
})

$('#myCarousel').on('slid.bs.carousel', function (e) {
  // sync thumb years carousel
  var currSlide = e.to
  if (currSlide===6) {
      $('#thumbCarousel').carousel(1)
  }
  else if (currSlide===0) {
      $('#thumbCarousel').carousel(0)
  }
})

Working demo