Horizontal Tab
The tab component is used to hide content behind selectable tabs. These tabs are typically arranged horizontally at the top.
content
Demo
A basic horizontal tab
<div id="horizontal-tab" class="row w-100 no-gutters">
<div class="row-inner mw-1200 col-12 no-gutters">
<div class="module adv-jumbotron-carousel">
<div id="tab-Navs" class="row no-gutters adv-jumbotron-carousel-navs">
<div class="col-4 adv-jumbotron-carousel-nav col-md-4 active">
<h3 aria-label="Tab Header 01">Tab 01</h3>
</div>
<div class="col-4 adv-jumbotron-carousel-nav col-md-4">
<h3 aria-label="Tab Header 01">Tab 02</h3>
</div>
<div class="col-4 adv-jumbotron-carousel-nav col-md-4">
<h3 aria-label="Tab Header 03">Tab 03</h3>
</div>
</div>
</div>
<div id="tab-carousel" class="adv-jumbotron-carousel-container owl-carousel">
<div class="mw-1200 content">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image">
<img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-fluid" alt="Image name">
</div>
<div class="adv-jumbotron-content">
<h4>Title 1</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="adv-jumbotron-btns">
<a href="#" class="btn btn-primary rounded-0">View more</a>
<a href="#" class="btn btn-secondary rounded-0">View more</a>
</div>
</div>
</div>
</div>
<div class="mw-1200 content">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image">
<img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-fluid" alt="Image name">
</div>
<div class="adv-jumbotron-content">
<h4>Title 2</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="adv-jumbotron-btns">
<a href="#" class="btn btn-primary rounded-0">View more</a>
<a href="#" class="btn btn-secondary rounded-0">View more</a>
</div>
</div>
</div>
</div>
<div class="mw-1200 content">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image">
<img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-fluid" alt="Image name">
</div>
<div class="adv-jumbotron-content">
<h4>Title 1</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="adv-jumbotron-btns">
<a href="#" class="btn btn-primary rounded-0">View more</a>
<a href="#" class="btn btn-secondary rounded-0">View more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Tabs with horizontal underline Effect
<div id="horizontal-nav" class="row w-100 no-gutters">
<div class="row-inner mw-1200 col-12 no-gutters">
<div class="module adv-jumbotron-carousel">
<div id="tab-Navs" class="row no-gutters adv-jumbotron-carousel-navs">
<div class="col-4 adv-jumbotron-carousel-nav col-md-4 active">
<h3 aria-label="Tab Header 01">Tab 01</h3>
</div>
<div class="col-4 adv-jumbotron-carousel-nav col-md-4">
<h3 aria-label="Tab Header 01">Tab 02</h3>
</div>
<div class="col-4 adv-jumbotron-carousel-nav col-md-4">
<h3 aria-label="Tab Header 03">Tab 03</h3>
</div>
</div>
</div>
<div id="tab-carousel" class="adv-jumbotron-carousel-container owl-carousel">
<div class="mw-1200 content">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image">
<img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-fluid" alt="Image name">
</div>
<div class="adv-jumbotron-content">
<h4>Title 1</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="adv-jumbotron-btns">
<a href="#" class="btn btn-primary rounded-0">View more</a>
<a href="#" class="btn btn-secondary rounded-0">View more</a>
</div>
</div>
</div>
</div>
<div class="mw-1200 content">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image">
<img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-fluid" alt="Image name">
</div>
<div class="adv-jumbotron-content">
<h4>Title 2</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="adv-jumbotron-btns">
<a href="#" class="btn btn-primary rounded-0">View more</a>
<a href="#" class="btn btn-secondary rounded-0">View more</a>
</div>
</div>
</div>
</div>
<div class="mw-1200 content">
<div class="module adv-jumbotron expander-item animated item-content-light">
<div class="adv-jumbotron-image">
<img src="https://advcloudfiles.advantech.com/design/web-design-guides/component/images/default.png" class="img-fluid" alt="Image name">
</div>
<div class="adv-jumbotron-content">
<h4>Title 1</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="adv-jumbotron-btns">
<a href="#" class="btn btn-primary rounded-0">View more</a>
<a href="#" class="btn btn-secondary rounded-0">View more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Basic Usage
Please avoid duplicating the reference to the same CSS and JS files.
CSS
Copy-paste the stylesheet <link>
into your <head>
before all other stylesheets to load our CSS.
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/web/lib/jquery-owl-carousel/2.2.1/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/web/lib/jquery-owl-carousel/2.2.1/assets/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/style.css">
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/horizontal-tab.css">
JavaScript Instantiation
Place the following <script>
near the end of your pages, right before the closing </body>
tag, to enable them.
<script src="https://advcloudfiles.advantech.com/web/lib/jquery/jquery-3.6.0.min.js"></script>
<script src="https://advcloudfiles.advantech.com/web/lib/jquery-owl-carousel/2.2.1/owl.carousel.min.js"></script>
<script src="https://advcloudfiles.advantech.com/design/web-design-guides/component/js/Horizontal-Tab/initHorizontalTabCarousel.js"></script>
Call the Data tables via JavaScript:
The function initHorizontalTabCarousel accepts two parameters, the ID of the carousel element (e.g., '#tab-carousel' and '#tab-carousel2') and the ID of the navigation container (e.g., '#tab-Navs' and '#tab-Navs2'). It then initializes the Owl Carousel with the specified settings.
// IInitialize Horizontal-Tab-Carousel
initHorizontalTabCarousel('#tab-carousel','#tab-Navs');
// Initialize Horizontal-Tab-Carousel2
initHorizontalTabCarousel('#tab-carousel2','#tab-Navs2');