WebMD Ignite DX Engine

Marquee Carousel: Content Position Options 

<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" data-overlay-show="1" data-content-vertical-position="top">
                    <div class="hgm-marquee-carousel__slide-component-bg hgm-lazy-carousel" data-bg="https://www.travelandleisure.com/thmb/T4VaF2sMVJxi8oBC-bbg6FWReTQ=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/TAL-header-mount-rainier-national-park-washington-USNP0323-a21fa46048a84a49ad34db7d689300ff.jpg"></div>
                    <!-- &__slide-component-bg -->
                    <div class="hgm-marquee-carousel__slide-component-overlay"></div>
                    <div class="hgm-marquee-carousel__slide-component-content container">
                        <div class="col-6">
                            <h2>tester slide one</h2>
                            <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" data-overlay-blend-mode="saturation" data-overlay-show="1" data-overlay-alpha="80">
                    <div class="hgm-marquee-carousel__slide-component-bg hgm-lazy-carousel" data-bg="https://www.travel-experience-live.com/wp-content/uploads/2017/07/Banff-National-Park.jpg"></div>
                    <!-- &__slide-component-bg -->
                    <div class="hgm-marquee-carousel__slide-component-overlay"></div>
                    <div class="hgm-marquee-carousel__slide-component-content container">
                        <div class="col-12">
                            <h2>tester slide two</h2>
                            <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" data-overlay-blend-mode="overlay" data-overlay-show="1" data-overlay-alpha="50" data-content-vertical-position="center">
                    <div class="hgm-marquee-carousel__slide-component-bg hgm-lazy-carousel" data-bg="https://cdn.mos.cms.futurecdn.net/6s3W79wZxmnxJRrwTmK3zm.jpg"></div>
                    <!-- &__slide-component-bg -->
                    <div class="hgm-marquee-carousel__slide-component-overlay"></div>
                    <div class="hgm-marquee-carousel__slide-component-content container">
                        <div class="col-12">
                            <h2>tester slide three</h2>
                            <a class="hgm-button" href="#">this is a link</a>
                        </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>
        </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" data-overlay-show="1" data-content-vertical-position="top">
          <div class="hgm-marquee-carousel__slide-component-bg hgm-lazy-carousel"
               data-bg="https://www.travelandleisure.com/thmb/T4VaF2sMVJxi8oBC-bbg6FWReTQ=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/TAL-header-mount-rainier-national-park-washington-USNP0323-a21fa46048a84a49ad34db7d689300ff.jpg"></div>
          <!-- &__slide-component-bg -->
          <div class="hgm-marquee-carousel__slide-component-overlay"></div>
          <div class="hgm-marquee-carousel__slide-component-content container">
            <div class="col-6">
              <h2>tester slide one</h2>
              <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" data-overlay-blend-mode="saturation" data-overlay-show="1" data-overlay-alpha="80">
          <div class="hgm-marquee-carousel__slide-component-bg hgm-lazy-carousel"
               data-bg="https://www.travel-experience-live.com/wp-content/uploads/2017/07/Banff-National-Park.jpg"></div>
          <!-- &__slide-component-bg -->
          <div class="hgm-marquee-carousel__slide-component-overlay"></div>
          <div class="hgm-marquee-carousel__slide-component-content container">
            <div class="col-12">
              <h2>tester slide two</h2>
              <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" data-overlay-blend-mode="overlay" data-overlay-show="1" data-overlay-alpha="50" data-content-vertical-position="center">
          <div class="hgm-marquee-carousel__slide-component-bg hgm-lazy-carousel"
               data-bg="https://cdn.mos.cms.futurecdn.net/6s3W79wZxmnxJRrwTmK3zm.jpg"></div>
          <!-- &__slide-component-bg -->
          <div class="hgm-marquee-carousel__slide-component-overlay"></div>
          <div class="hgm-marquee-carousel__slide-component-content container">
            <div class="col-12">
              <h2>tester slide three</h2>
              <a class="hgm-button" href="#">this is a link</a>
            </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>
    </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