← Snippets - Script

Random Static Hero Ad on Load

This is sometimes used as an alternative to sliders.

Bootstrap 5 (vanilla JS)

if(!inCms) {
    if(bodyTag.classList.contains('home')) {
      let rand = Math.floor(Math.random()*3);
      const heroOption = document.querySelectorAll('.hero-randomizer-space')[rand];
      heroOption.style.display = "block";
    }
  }

Bootstrap 4 down (jquery)

Script - sliders.js

You’ll want this to go on the ELSE of the window load function, so that it only loads on the published page. (Otherwise, the client would be stuck refreshing the CMS trying to get all the ads.)

var rand = Math.floor(Math.random()*3);
var divs = $('.hero-randomizer-space')[rand];
$(divs).show();

Styles

Make sure to set your randomized divs as hidden in your styling, so that the script can determine which one to show.

.hero .hero-randomizer-space {
  display: none;
}

HTML

Here is an example hero ad space for how you might want to set everything up.

<div class="hero-randomizer">
  <div class="hero-randomizer-space remove-blank">
    <div class="hero-randomizer-space__image">
      <div data-content-block="hero1" data-content="content" data-editable="editable" class="image">
        {{#page.hero1}}
            {{& content}}
          {{/page.hero1}}
          <!-- @if NODE_ENV!='production' -->
              <img src="https://dummyimage.com/1600x800?text=1" alt="">
          <!-- @endif -->
      </div>
    </div>
    <div class="hero-randomizer-space__text">
      <div class="container">
        <div class="row">
          <div class="col-md-7 offset-md-1">
            <div data-content-block="hero2" data-content="content" data-editable="editable" class="content">
              {{#page.hero2}}
                  {{& content}}
                {{/page.hero2}}
                <!-- @if NODE_ENV!='production' -->
                    <h2>Banking Made Simple</h2>
                    <h3><em>because, why not?</em></h3>
                    <p class="big">You've got a busy life; banking doesn't need to get in the way of it.</p>
                    <p><a href="" class="btn btn-inverse">Open an Account</a></p>
                <!-- @endif -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="hero-randomizer-space remove-blank">
    <div class="hero-randomizer-space__image">
      <div data-content-block="hero3" data-content="content" data-editable="editable" class="image">
        {{#page.hero3}}
            {{& content}}
          {{/page.hero3}}
          <!-- @if NODE_ENV!='production' -->
              <img src="https://dummyimage.com/1600x800?text=2" alt="">
          <!-- @endif -->
      </div>
    </div>
    <div class="hero-randomizer-space__text">
      <div class="container">
        <div class="row">
          <div class="col-md-7 offset-md-1">
            <div data-content-block="hero4" data-content="content" data-editable="editable" class="content">
              {{#page.hero4}}
                  {{& content}}
                {{/page.hero4}}
                <!-- @if NODE_ENV!='production' -->
                    <h2>Second Hero ad</h2>
                    <h3><em>because, why not?</em></h3>
                    <p class="big">You've got a busy life; banking doesn't need to get in the way of it.</p>
                    <p><a href="" class="btn btn-inverse">Open an Account</a></p>
                <!-- @endif -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="hero-randomizer-space remove-blank">
    <div class="hero-randomizer-space__image">
      <div data-content-block="hero5" data-content="content" data-editable="editable" class="image">
        {{#page.hero5}}
            {{& content}}
          {{/page.hero5}}
          <!-- @if NODE_ENV!='production' -->
              <img src="https://dummyimage.com/1600x800?text=3" alt="">
          <!-- @endif -->
      </div>
    </div>
    <div class="hero-randomizer-space__text">
      <div class="container">
        <div class="row">
          <div class="col-md-7 offset-md-1">
            <div data-content-block="hero6" data-content="content" data-editable="editable" class="content">
              {{#page.hero6}}
                  {{& content}}
                {{/page.hero6}}
                <!-- @if NODE_ENV!='production' -->
                    <h2>Third Hero space</h2>
                    <h3><em>because, why not?</em></h3>
                    <p class="big">You've got a busy life; banking doesn't need to get in the way of it.</p>
                    <p><a href="" class="btn btn-inverse">Open an Account</a></p>
                <!-- @endif -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Example Sites

Tags: hero, bs2, bs3, bs4, bs5, javascript, jquery