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.

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 light">
                           <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 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 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 light">
                <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 light">
                <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);
});

Content