Carousel video

Script to intercept the carousel slides to provide the overlay player if needed.

by davehol

HTML

<div class="m-carousel" style="width: 3840px;">





  <div class="c-carousel c-carousel-feature" data-index="0" style="width: 960px; left: 0px; transition-duration: 0ms; transform: translate(960px, 0px) translateZ(0px);">


    <a href="/#" class="no-outline" title="Big data, big opportunity" tabindex="-1">



      <figure class="c-carousel-image scaled-background" style="background-image: url(&quot;/content/dam/rmit/multimedia/video/business/alumni/Nicole%20Williamson_LANDSCAPE.jpg.transform/rendition-1440x960/image.jpg&quot;);">
        <img alt="" class="js-responsive-image bg-cover offset-content" data-ri-strict="true" data-ri-md="/content/dam/rmit/multimedia/video/business/alumni/Nicole%20Williamson_LANDSCAPE.jpg.transform/rendition-1440x960/image.jpg" data-ri-xs="/content/dam/rmit/multimedia/video/business/alumni/Nicole%20Williamson_LANDSCAPE.jpg.transform/rendition-1500x750/image.jpg"
          data-ri-xxs="/content/dam/rmit/multimedia/video/business/alumni/Nicole%20Williamson_LANDSCAPE.jpg.transform/rendition-1040x520/image.jpg" data-ri-fallback="/etc/designs/rmit-ui/styles/images/carousel-feature-fallback.jpg" src="/content/dam/rmit/multimedia/video/business/alumni/Nicole%20Williamson_LANDSCAPE.jpg.transform/rendition-1440x960/image.jpg">
      </figure>
      <div class="c-carousel-panel">
        <h2 class="c-carousel-title">Big data, big opportunity</h2>
        <p class="c-carousel-desc">Businesses are overloaded with data but what do they lack? The people to make sense of it all.</p>
        <span class="span-outline c-carousel-cta">Watch the video</span>
        <p class="c-carousel-image-caption">
          <b></b>


        </p>
        <div class="c-carousel-panel-arrow grunticon-arw-right-gryAD-20"></div>
      </div>
    </a>
  </div>




  <div class="c-carousel c-carousel-feature" data-index="1" style="width: 960px; left: -960px; transition-duration: 300ms; transform: translate(-960px, 0px) translateZ(0px);">


    <a...

CSS

div ul:not(:first-child) {
  background-color: #900;
}

JavaScript

var slideVid = (function() {
  var slides = $(".c-carousel-feature a");
  slides.each(function() {
    if ($(this).find(".c-carousel-cta").text() == "Watch the video") {
      $(this).attr({
        "data-lightbox-src": $(this).attr("href") + ".lightbox.html",
        href: "#"
      });
      $(this).addClass("js-launch-lightbox");
    }
  });
})();