Is there a way to create a "Carousel Banner" with a Menu Bar?

Hi guys, I'm looking to create a section on my page that would look like this:

Mini-Menu Bar (Item 1 / Item 2 / Item 3 / Item 4)

<IMAGE>
<TEXT>

So what I want to achieve it that the Item 1, Item 2, Item 3, Item 4 are all visible.
And when you click on it, the Carousel moves left or right to the corresponding Image AND Text.

E.g. if you click on Item 4, then the Carousel moves to show IMAGE 4 and TEXT 4.

TL;dr: Basically a mini-page within the page, with it's own menu bar.

Hi. You mean this effect?

If yes, add a Code Block >> Paste this code

<div class="owl-carousel owl-theme" id="cpchris">
  <div class="item" data-dot="<button class='pagi-btn'>Offers & Promotions</button>"><h4>1</h4></div>
    <div class="item" data-dot="<button class='pagi-btn'>2021 Venza & 2021 Sienna</button>"><h4>2</h4></div>
    <div class="item" data-dot="<button class='pagi-btn'>Moving as one</button>"><h4>3</h4></div>
    </div>
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css"/>
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css"/>
<style>
  .item {
  background: #0c83e7;
  padding: 80px 0px;
  margin: 5px;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}
.owl-dot{ width:250px; text-align:left; padding:0px 10px;}
.pagi-btn::before{content: ''; width:100% !important; height:5px !important; background:grey !important; display:table !important; margin:0px 0px 5px 0px !important; }
.pagi-label{ font-size:15px; font-family:Arial; font-weight:700; margin:5px 0px 0px 0px}
.owl-dot.active .pagi-btn::before{ background:#cc0000 !important;}
.owl-dot.active .pagi-btn{ color:#cc0000;}
.pagi-btn{ position:relative;width:100%; background:transparent !important; text-align:left; border:none !important; cursor:pointer;padding-top:25px; font-size:16px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<script>
  $('#cpchris').owlCarousel({
    items:1,
        nav: false,
        dots: true,
        dotsData: true,
    
})
</script>