Silvire Posted March 31, 2021 Share Posted March 31, 2021 (edited) 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. Edited March 31, 2021 by Silvire Link to comment
tuanphan Posted April 10, 2021 Share Posted April 10, 2021 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> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment