Key Visual
The components of the key visual can be used simultaneously to display both text content and background images or videos in a section, and when multiple assets are present, there will be a carousel effect for demo.
content
Demo
Single Key visual
The Key Visual component offers two versions, light and dark, to accommodate different types of videos or images for optimal presentation.
Light mode : The light mode version of the carousel component is designed to work well with light-colored videos and images as materials. The text at the top will be presented in black.
Dark mode : The dark mode version of the carousel component is designed to work well with dark-colored videos and images as materials. The text at the top will be presented in white.
single images (Light mode)
<div id="video-banner-wrapper">
<div class="row-fluid">
<div id="main-banner-wrapper">
<div class="row-fluid">
<div id="main-banner-inner" class="banner-wrapper adv-key-visual-carousel owl-theme adv-key-visual-dark">
<div class="banner-item light">
<div class="item adv-key-visual-slide" style="background-repeat: no-repeat; background-position: center top; background-size: cover; background-image: url(https://advcloudfiles.advantech.com/web/Images/solutions-2018/ilogistics/banners/202210version/02_warehouse.jpg);">
<div class="mw-1200 col-12">
<img src="https://advcloudfiles.advantech.com/web/Images/solutions-2018/ifactory/banners/banner.png" alt="Key Visual Banner">
</div>
</div>
<div class="row-maxwidth-95pct">
<div class="banner-content dark">
<h1>iFactory</h1>
<h3>InnoTalks, Industrial IoT Insights. Monthly Video On-Demand.</h3>
<div class="banner-btn clearfix">
<a class="btn-primary" href="#" target="_blank">Watch Video</a>
<a class="btn-secondary" href="#" target="_blank">View More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>single video (Dark mode)
<div id="video-banner-wrapper">
<div class="row-fluid">
<div id="main-banner-wrapper">
<div class="row-fluid">
<div id="main-banner-inner" class="banner-wrapper adv-key-visual-carousel owl-theme">
<div class="banner-item dark">
<div class="banner-video">
<div class="banner-mask"> </div>
<video autoplay loop muted style="">
<source src="https://advcloudfiles.advantech.com/web/Images/Solutions/IndustrialEquipmentManufacturing/230607/banner/video-03.mp4" type="video/mp4">
</video>
<div class="mb-kv">
<img src="images/mb-kv-01.jpg" alt="KV">
</div>
</div>
<div class="row-maxwidth-95pct">
<div class="banner-content">
<h1>iFactory</h1>
<h3>Advantech offers iFactory SRPs (Solution Ready Packages) for various automation control solutions to accelerate the implementation of smart manufacturing in industry 4.0.</h3>
<div class="banner-btn clearfix">
<a class="btn-primary" href="#" target="_blank">Watch Video</a>
<a class="btn-secondary" href="#" target="_blank">View More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Key visual carousel slider
In the presence of multiple images or videos, a carousel effect is used to provide a smooth presentation.
Light mode
<div id="video-banner-wrapper">
<div class="row-fluid">
<div id="main-banner-wrapper">
<div class="row-fluid">
<div id="main-banner-inner" class="banner-wrapper adv-key-visual-carousel owl-carousel owl-theme adv-key-visual-dark">
<div class="banner-item light">
<div class="banner-video">
<div class="banner-mask"> </div>
<video autoplay loop muted style="">
<source src="https://advcloudfiles.advantech.com/web/Images/Solutions/iFactory/202212version/video-01.mp4" type="video/mp4">
</video>
<div class="mb-kv">
<img src="images/mb-kv-L-01.jpg" alt="KV">
</div>
</div>
<div class="row-maxwidth-95pct">
<div class="banner-content">
<h1>iFactory</h1>
<h3>InnoTalks, Industrial IoT Insights. Monthly Video On-Demand.</h3>
<div class="banner-btn clearfix">
<a class="btn-primary" href="#" target="_blank">Watch Video</a>
<a class="btn-secondary" href="#" target="_blank">View More</a>
</div>
</div>
</div>
</div>
<div class="banner-item light">
<div class="item adv-key-visual-slide" style="background-repeat: no-repeat; background-position: center top; background-size: cover; background-image: url(https://advcloudfiles.advantech.com/web/Images/solutions-2018/ilogistics/banners/202210version/02_warehouse.jpg);">
<div class="mw-1200 col-12">
<img src="https://advcloudfiles.advantech.com/web/Images/solutions-2018/ifactory/banners/banner.png" alt="Key Visual Banner">
</div>
</div>
<div class="row-maxwidth-95pct">
<div class="banner-content dark">
<h1>iFactory</h1>
<h3>InnoTalks, Industrial IoT Insights. Monthly Video On-Demand.</h3>
<div class="banner-btn clearfix">
<a class="btn-primary" href="#" target="_blank">Watch Video</a>
<a class="btn-secondary" href="#" target="_blank">View More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> Dark mode
<div id="video-banner-wrapper">
<div class="row-fluid">
<div id="main-banner-wrapper">
<div class="row-fluid">
<div id="main-banner-inner" class="banner-wrapper adv-key-visual-carousel owl-carousel owl-theme adv-key-visual">
<!-- Start banner 01 Video -->
<div class="banner-item dark">
<div class="banner-video">
<div class="banner-mask"> </div>
<video autoplay loop muted style="">
<source src="https://advcloudfiles.advantech.com/web/Images/Solutions/IndustrialEquipmentManufacturing/230607/banner/video-03.mp4" type="video/mp4">
</video>
<div class="mb-kv"> <img src="images/mb-kv-01.jpg" alt="KV"> </div>
</div>
<div class="row-maxwidth-95pct">
<div class="banner-content">
<h1>iFactory</h1>
<h3>Advantech offers iFactory SRPs.</h3>
<div class="banner-btn clearfix"> <a class="btn-primary" href="#" target="_blank">Watch Video</a> <a class="btn-secondary" href="#" target="_blank">View More</a> </div>
</div>
</div>
</div>
<div class="banner-item dark">
<div class="item adv-key-visual-slide" style="background-repeat: no-repeat; background-position: center top; background-size: cover; background-image: url(https://advcloudfiles.advantech.com/web/Images/Solutions/EnergyAndEnvironment/EnergyEnviroment_1920x450_20220927.jpg);">
<div class="mw-1200 col-12">
<img src="https://advcloudfiles.advantech.com/web/Images/solutions-2018/ifactory/banners/banner.png" alt="Key Visual Banner"> </div>
</div>
<div class="row-maxwidth-95pct">
<div class="banner-content">
<h1>iFactory</h1>
<h3>InnoTalks, Industrial IoT Insights.</h3>
<div class="banner-btn clearfix"> <a class="btn-primary" href="#" target="_blank">Watch Video</a> <a class="btn-secondary" href="#" target="_blank">View More</a> </div>
</div>
</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/fonts/font-awesome/lastest/css/all.min.css">
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/owl.carousel.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/main-banner.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/jQuery/jquery-1.8.2.min.js"></script>
<script src="https://advcloudfiles.advantech.com/design/web-design-guides/component/js/owl.carousel.js"></script>
<script src="https://advcloudfiles.advantech.com/web/lib/advantech-lib/initOwlCarousel.js"></script>
Key visual includes an optional JavaScript component.
initOwlCarousel(selector, loop, autoplay);
Parameters
| selector (String) | The CSS selector for the Owl Carousel container |
| loop (Boolean) | Enable or disable the infinite loop |
| autoplay (Boolean) | Enable or disable autoplay |
$(document).ready(() => {
initOwlCarousel('#main-banner-inner', true, true);
});