Handle multiple elements (navbar & slideshow)

[ppo]

It would be great if we could define multiple text elements.
For example by defining a selector in the options (e.g. .main-header a or .logo, .top-nav a) or using a data attribute (e.g. data-contrast-el).

In the meantime, here's how I solved this problem…

Use case: Fullscreen slideshow with top navbar.
The navbar contains multiple text elements.
There is a single background which changes automatically.

HTML:

<header class="main-header">
  <a class="logo" href="/" data-contrast-el>NAME</a>
  <nav class="top-nav">
    <ul>
        <li><a href="…" data-contrast-el>Link 1</a>
        <li><a href="…" data-contrast-el>Link 2</a>
        <li><a href="…" data-contrast-el>Link 3</a>
    </ul>
  </nav>
</header>
<main>
  <div class="swiper-container">
    <a class="swiper-wrapper" href="…">
      <div class="swiper-slide" style="background-image:url('…')"></div>
      <div class="swiper-slide" style="background-image:url('…')"></div>
      <div class="swiper-slide" style="background-image:url('…')"></div>
    </a>
  </div>
</main>

JavaScript:

var contrastHandlers = [];

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.main-header a');
  for (var i=0; i < elems.length; i++) {
    var elementClass = 'contrast-el-' + contrastHandlers.length;
    elems[i].classList.add(elementClass);
    contrastHandlers.push(new Contrast({
      elementClass: elementClass,
      bgClass: 'swiper-slide-active',
    }));
  }

  var swiper = new Swiper('.swiper-container', {
    // …other config options…
    on: {
      slideChangeTransitionEnd: function () {
        for (var i=0; i < contrastHandlers.length; i++) {
          try { contrastHandlers[i].launch(); } catch {}
        }
      },
    },
  });
});