Slideshow Header Banner

The slideshow header banner is a rotating hero banner that appears below the page header and can contain multiple hero images with or without captions and links. To use this banner type add /ssi/header-slideshow-banner.html using the SSI include method right below the header of the desired page.

</header> 
<!-- Include Page Template -->
 <!--#include virtual="/ssi/header-slideshow-banner.html" -->

To change the slideshow images edit the header-slideshow-banner.html include file located in the ssi directory. Each slide in the banner containes a background image and an optional caption that functions as a link. The image is set by changing the background property in the style attribute for <div class="slide" style="background-image: url('sample/images/background_1.jpg');">. The recommended dimensions of the banner images are 1500 by 500 pixels with the resolution of 72dpi.

An optional link with a caption can be added. The caption is contained inside the link in the .slide-text element.

Source Code:

<div class="header-slideshow-banner hidden-print">
  <div id="primary-carousel" class="carousel carousel-banner">
      
      
    <div class="slide" style="background-image: url('/images/slideshow/DRE_Image4.jpg');">
      <a href="/contact.html#phone">
       <p class="slide-text"><span class="title">California Department of Real Estate</span><br>Main Contact Line: 877-373-4542</p>
      </a>
    </div>

<div class="slide" style="background-image: url('/images/slideshow/DRE_Image5.jpg');">
      <a href="/contact.html#phone">
        <p class="slide-text"><span class="title">California Department of Real Estate</span><br>Main Contact Line: 877-373-4542</p>
      </a>
    </div>
  
    <div class="slide" style="background-image: url('/images/slideshow/DRE_Image7.jpg');">
      <a href="/contact.html#phone">
        <p class="slide-text"><span class="title">California Department of Real Estate</span><br>Main Contact Line: 877-373-4542</p>
      </a>
    </div>
    
        <div class="slide" style="background-image: url('/images/slideshow/DRE_Image6.jpg');">
      <a href="/contact.html#phone">
        <p class="slide-text"><span class="title">California Department of Real Estate</span><br>Main Contact Line: 877-373-4542</p>
      </a>
    </div>
    
        <div class="slide" style="background-image: url('/images/slideshow/DRE_Image3.jpg');">
      <a href="/contact.html#phone">
        <p class="slide-text"><span class="title">California Department of Real Estate</span><br>Main Contact Line: 877-373-4542</p>
      </a>
    </div>
      
        <div class="slide" style="background-image: url('/images/slideshow/DRE_Image2.jpg');">
      <a href="/contact.html#phone">
        <p class="slide-text"><span class="title">California Department of Real Estate</span><br>Main Contact Line: 877-373-4542</p>
      </a>
    </div>
    
        <div class="slide" style="background-image: url('/images/slideshow/DRE_Image1.jpg');">
      <a href="/contact.html#phone">
        <p class="slide-text"><span class="title">California Department of Real Estate</span><br>Main Contact Line: 877-373-4542</p>
      </a>
    </div>

<div class="slide" style="background-image: url('/images/slideshow/CalRealEstateMainSize.jpg');">
      <a href="/contact.html#phone">
        <p class="slide-text"><span class="title">California Department of Real Estate</span><br>Main Contact Line: 877-373-4542</p>
      </a>
    </div>
      
  </div>
</div>