Silvire Posted March 31, 2021 Share Posted March 31, 2021 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. 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.