Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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

Recommended Posts

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)



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.

Edited by Silvire
Link to post
  • 2 weeks later...
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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>
<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"/>
  .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;}
<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>
        nav: false,
        dots: true,
        dotsData: true,


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...