WebMD Ignite DX Engine

Marquee Carousel: Two Column 

<div class="glide hgm-marquee-carousel">

    <div class="glide__track" data-glide-el="track">
        <ul class="glide__slides">
            <li class="glide__slide">
                <div class="hgm-marquee-carousel__slide-component">
                    <div class="hgm-marquee-carousel__slide-component-bg"></div>
                    <!-- &__slide-component-bg -->
                    <div class="hgm-marquee-carousel__slide-component-overlay"></div>
                    <div class="hgm-marquee-carousel__slide-component-content container two-column">
                        <div class="col-6">
                            <h5>Patient Story</h5>
                            <h3>A Moment Like No Other</h3>
                            <p>An unexpected diagnosis became a life-altering moment for Kim.</p>
                            <a class="hgm-button" href="#">this is a link</a>
                        </div>
                        <div class="col-6">
                            <img width="1200" height="900" class="hgm-lazy-carousel rounded" data-src="https://img.freepik.com/free-photo/medium-shot-smiley-doctor-with-coat_23-2148814212.jpg" />
                        </div>
                    </div><!-- &__content -->
                </div><!-- &__slide-component -->
            </li>
            <li class="glide__slide">
                <div class="hgm-marquee-carousel__slide-component">
                    <div class="hgm-marquee-carousel__slide-component-bg"></div>
                    <!-- &__slide-component-bg -->
                    <div class="hgm-marquee-carousel__slide-component-overlay"></div>
                    <div class="hgm-marquee-carousel__slide-component-content container two-column">
                        <div class="col-6">
                            <img width="1200" height="800" class="hgm-lazy-carousel rounded shadow x-large" data-src="https://img.freepik.com/free-photo/team-young-specialist-doctors-standing-corridor-hospital_1303-21198.jpg" />
                        </div>
                        <div class="col-6">
                            <h5>Patient Story</h5>
                            <h3>This is the second slide</h3>
                            <p>An unexpected diagnosis became a life-altering moment for Kim.</p>
                            <a class="hgm-button" href="#">this is a link</a>
                        </div>
                    </div><!-- &__content -->
                </div><!-- &__slide-component -->
            </li>
            <li class="glide__slide">
                <div class="hgm-marquee-carousel__slide-component">
                    <div class="hgm-marquee-carousel__slide-component-bg"></div>
                    <!-- &__slide-component-bg -->
                    <div class="hgm-marquee-carousel__slide-component-overlay"></div>
                    <div class="hgm-marquee-carousel__slide-component-content container two-column">
                        <div class="col-6">
                            <h5>Patient Story</h5>
                            <h3>Third slide, More Labradors</h3>
                            <p>An unexpected diagnosis became a life-altering moment for Kim.</p>
                            <a class="hgm-button" href="#">this is a link</a>
                        </div>
                        <div class="col-6">
                            <img width="800" height="527" class="hgm-lazy-carousel rounded border" data-src="https://img.freepik.com/free-photo/team-young-specialist-doctors-standing-corridor-hospital_1303-21199.jpg" />
                        </div>
                    </div><!-- &__content -->
                </div><!-- &__slide-component -->
            </li>
            <li class="glide__slide">
                <div class="hgm-marquee-carousel__slide-component">
                    <div class="hgm-marquee-carousel__slide-component-bg"></div>
                    <!-- &__slide-component-bg -->
                    <div class="hgm-marquee-carousel__slide-component-overlay"></div>
                    <div class="hgm-marquee-carousel__slide-component-content container two-column mobile-reverse">
                        <div class="col-6">
                            <h5>Patient Story</h5>
                            <h3>Fourth slide, Changing Content Order on Mobile</h3>
                            <p>An unexpected diagnosis became a life-altering moment for Kim.</p>
                            <a class="hgm-button" href="#">this is a link</a>
                        </div>
                        <div class="col-6">
                            <img width="1080" height="608" class="hgm-lazy-carousel rounded" data-src="https://img.freepik.com/free-photo/young-doctor-supporting-his-patient_1098-2237.jpg" />
                        </div>
                    </div><!-- &__content -->
                </div><!-- &__slide-component -->
            </li>
            <li class="glide__slide">
                <div class="hgm-marquee-carousel__slide-component" data-overlay-blend-mode="screen" data-overlay-show="1" data-overlay-alpha="60">
                    <div class="hgm-marquee-carousel__slide-component-bg hgm-lazy-carousel" data-bg="https://cdn.wallpapersafari.com/86/11/3iFweR.jpg"></div>
                    <!-- &__slide-component-bg -->
                    <!-- &__slide-component-bg -->
                    <div class="hgm-marquee-carousel__slide-component-overlay"></div>
                    <div class="hgm-marquee-carousel__slide-component-content container two-column mobile-reverse">
                        <div class="col-6">
                            <h5>Patient Story</h5>
                            <h3>Fifth slide, Changing Content Order on Mobile Combined with Background Image on Slide</h3>
                            <p>An unexpected diagnosis became a life-altering moment for Kim.</p>
                            <a class="hgm-button" href="#">this is a link</a>
                        </div>
                        <div class="col-6">
                            <img width="1440" height="900" class="hgm-lazy-carousel rounded" data-src="https://img.freepik.com/free-photo/covid-recovery-center-female-doctor-holding-older-patient-s-hands_23-2148847832.jpg" />
                        </div>
                    </div><!-- &__content -->
                </div><!-- &__slide-component -->
            </li>
        </ul>
    </div><!-- &__track -->

    <div class="hgm-marquee-carousel__controls">
        <div class="glide__bullets" data-glide-el="controls[nav]">
            <button class="glide__bullet" data-glide-dir="=0"></button>
            <button class="glide__bullet" data-glide-dir="=1"></button>
            <button class="glide__bullet" data-glide-dir="=2"></button>
            <button class="glide__bullet" data-glide-dir="=3"></button>
            <button class="glide__bullet" data-glide-dir="=4"></button>
        </div><!-- &__bullets -->
        <div class="glide__arrows" data-glide-el="controls">
            <button class="glide__arrow glide__arrow--left" data-glide-dir="<"><span class="sr-only">previous</span></button>
            <button class="glide__arrow glide__arrow--right" data-glide-dir=">"><span class="sr-only">next</span></button>
        </div><!-- &__arrows -->
    </div><!-- &__controls -->

</div>
 
<div class="glide hgm-marquee-carousel">

  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide">
        <div class="hgm-marquee-carousel__slide-component">
          <div class="hgm-marquee-carousel__slide-component-bg"></div>
          <!-- &__slide-component-bg -->
          <div class="hgm-marquee-carousel__slide-component-overlay"></div>
          <div class="hgm-marquee-carousel__slide-component-content container two-column">
            <div class="col-6">
              <h5>Patient Story</h5>
              <h3>A Moment Like No Other</h3>
              <p>An unexpected diagnosis became a life-altering moment for Kim.</p>
              <a class="hgm-button" href="#">this is a link</a>
            </div>
            <div class="col-6">
              <img width="1200" height="900" class="hgm-lazy-carousel rounded" data-src="https://img.freepik.com/free-photo/medium-shot-smiley-doctor-with-coat_23-2148814212.jpg" />
            </div>
          </div><!-- &__content -->
        </div><!-- &__slide-component -->
      </li>
      <li class="glide__slide">
        <div class="hgm-marquee-carousel__slide-component">
          <div class="hgm-marquee-carousel__slide-component-bg"></div>
          <!-- &__slide-component-bg -->
          <div class="hgm-marquee-carousel__slide-component-overlay"></div>
          <div class="hgm-marquee-carousel__slide-component-content container two-column">
            <div class="col-6">
              <img width="1200" height="800" class="hgm-lazy-carousel rounded shadow x-large" data-src="https://img.freepik.com/free-photo/team-young-specialist-doctors-standing-corridor-hospital_1303-21198.jpg" />
            </div>
            <div class="col-6">
              <h5>Patient Story</h5>
              <h3>This is the second slide</h3>
              <p>An unexpected diagnosis became a life-altering moment for Kim.</p>
              <a class="hgm-button" href="#">this is a link</a>
            </div>
          </div><!-- &__content -->
        </div><!-- &__slide-component -->
      </li>
      <li class="glide__slide">
        <div class="hgm-marquee-carousel__slide-component">
          <div class="hgm-marquee-carousel__slide-component-bg"></div>
          <!-- &__slide-component-bg -->
          <div class="hgm-marquee-carousel__slide-component-overlay"></div>
          <div class="hgm-marquee-carousel__slide-component-content container two-column">
            <div class="col-6">
              <h5>Patient Story</h5>
              <h3>Third slide, More Labradors</h3>
              <p>An unexpected diagnosis became a life-altering moment for Kim.</p>
              <a class="hgm-button" href="#">this is a link</a>
            </div>
            <div class="col-6">
              <img width="800" height="527" class="hgm-lazy-carousel rounded border" data-src="https://img.freepik.com/free-photo/team-young-specialist-doctors-standing-corridor-hospital_1303-21199.jpg" />
            </div>
          </div><!-- &__content -->
        </div><!-- &__slide-component -->
      </li>
      <li class="glide__slide">
        <div class="hgm-marquee-carousel__slide-component">
          <div class="hgm-marquee-carousel__slide-component-bg"></div>
          <!-- &__slide-component-bg -->
          <div class="hgm-marquee-carousel__slide-component-overlay"></div>
          <div class="hgm-marquee-carousel__slide-component-content container two-column mobile-reverse">
            <div class="col-6">
              <h5>Patient Story</h5>
              <h3>Fourth slide, Changing Content Order on Mobile</h3>
              <p>An unexpected diagnosis became a life-altering moment for Kim.</p>
              <a class="hgm-button" href="#">this is a link</a>
            </div>
            <div class="col-6">
              <img width="1080" height="608" class="hgm-lazy-carousel rounded" data-src="https://img.freepik.com/free-photo/young-doctor-supporting-his-patient_1098-2237.jpg" />
            </div>
          </div><!-- &__content -->
        </div><!-- &__slide-component -->
      </li>
      <li class="glide__slide">
        <div class="hgm-marquee-carousel__slide-component" data-overlay-blend-mode="screen" data-overlay-show="1" data-overlay-alpha="60">
          <div class="hgm-marquee-carousel__slide-component-bg hgm-lazy-carousel"
               data-bg="https://cdn.wallpapersafari.com/86/11/3iFweR.jpg"></div>
          <!-- &__slide-component-bg -->
          <!-- &__slide-component-bg -->
          <div class="hgm-marquee-carousel__slide-component-overlay"></div>
          <div class="hgm-marquee-carousel__slide-component-content container two-column mobile-reverse">
            <div class="col-6">
              <h5>Patient Story</h5>
              <h3>Fifth slide, Changing Content Order on Mobile Combined with Background Image on Slide</h3>
              <p>An unexpected diagnosis became a life-altering moment for Kim.</p>
              <a class="hgm-button" href="#">this is a link</a>
            </div>
            <div class="col-6">
              <img width="1440" height="900" class="hgm-lazy-carousel rounded" data-src="https://img.freepik.com/free-photo/covid-recovery-center-female-doctor-holding-older-patient-s-hands_23-2148847832.jpg" />
            </div>
          </div><!-- &__content -->
        </div><!-- &__slide-component -->
      </li>
    </ul>
  </div><!-- &__track -->

  <div class="hgm-marquee-carousel__controls">
    <div class="glide__bullets" data-glide-el="controls[nav]">
      <button class="glide__bullet" data-glide-dir="=0"></button>
      <button class="glide__bullet" data-glide-dir="=1"></button>
      <button class="glide__bullet" data-glide-dir="=2"></button>
      <button class="glide__bullet" data-glide-dir="=3"></button>
      <button class="glide__bullet" data-glide-dir="=4"></button>
    </div><!-- &__bullets -->
    <div class="glide__arrows" data-glide-el="controls">
      <button class="glide__arrow glide__arrow--left" data-glide-dir="<"><span class="sr-only">previous</span></button>
      <button class="glide__arrow glide__arrow--right" data-glide-dir=">"><span class="sr-only">next</span></button>
    </div><!-- &__arrows -->
  </div><!-- &__controls -->

</div>
 
/* No context defined. */

Customizations

The Marquee Carousel component uses data attributes to customize behavior. Default background color for the carousel itself is gray-5 (#F2F2F2) unless overriden.

Data Attributes (component-level)

  • data-carousel-min-height-desktop - minimum carousel height on for desktop width screens (value in pixels)
  • data-carousel-min-height-mobile - minimum carousel height on for mobile width screens (value in pixels)
  • data-carousel-bg-color - hex value for the background color of the carousel
  • data-carousel-autoplay - set the carousel to autoplay (interval is specified in milliseconds)
  • data-carousel-hoverpause - allow the carousel to pause on hover; works best when autoplay is enabled
  • data-carousel-animation-duration - duration of the animation in milliseconds
  • data-carousel-animation-timing - Easing function for the animation (linear, ease, ease-in, ease-out, ease-in-out)

Data Attributes (slide-level)

  • data-content-vertical-position - set value to “top” to adjust the vertical alignment of the content to top (default position: center)
  • data-overlay-show - display an overlay above background image; value equal to 1
  • data-overlay-color - hex value for the overlay color; hashtag optional
  • data-overlay-alpha - opacity of the overlay; a value of 1 - 99 is expected
  • data-overlay-blend-mode - change the blend mode of the overlay; see list of expected blend mode values below

Blend Modes

  • normal
  • multiply
  • screen
  • overlay
  • darken
  • lighten
  • color-dodge
  • color-burn
  • hard-light
  • soft-light
  • difference
  • exclusion
  • hue
  • saturation
  • color
  • luminosity