Jump to content

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.

Link to comment
  • 2 weeks later...
  • Replies 1
  • Views 662
  • Created
  • Last Reply

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,


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.