WebMD Ignite DX Engine

Slideshow: Caption Top 

<div class="row">
    <div class="col-sm-12 col-lg-10">
        <div class="hgm-slideshow" data-click-count="0" data-caption-position="top">
            <ul class="hgm-slideshow__list">
                <li class="hgm-slideshow__item">
                    <figure data-bg="https://img.freepik.com/free-photo/team-young-specialist-doctors-standing-corridor-hospital_1303-21198.jpg" class="hgm-slideshow__image hgm-lazy">
                        <figcaption>Caption goes here and can be a long sentence or two.</figcaption>
                    </figure><!-- &__image -->
                </li><!-- &__item -->
                <li class="hgm-slideshow__item">
                    <figure data-bg="https://img.freepik.com/free-photo/team-young-specialist-doctors-standing-corridor-hospital_1303-21199.jpg" class="hgm-slideshow__image hgm-lazy">
                        <figcaption>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words.</figcaption>
                    </figure><!-- &__image -->
                </li><!-- &__item -->
                <li class="hgm-slideshow__item">
                    <figure data-bg="https://img.freepik.com/free-photo/portrait-friendly-doctor-isolated-gray_1328-5420.jpg" class="hgm-slideshow__image hgm-lazy">
                        <figcaption>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</figcaption>
                    </figure><!-- &__image -->
                </li><!-- &__item -->
                <li class="hgm-slideshow__item">
                    <figure data-bg="https://img.freepik.com/premium-photo/three-medical-intern-looking-through-x-ray-image-lungs-viral-pneumonia-covid-19-patient-clinic-medical-concept_359031-1555.jpg" class="hgm-slideshow__image hgm-lazy">
                        <figcaption>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</figcaption>
                    </figure><!-- &__image -->
                </li><!-- &__item -->
                <li class="hgm-slideshow__item">
                    <figure data-bg="https://img.freepik.com/free-photo/hands-unrecognizable-female-doctor-writing-form-typing-laptop-keyboard_1098-20374.jpg" class="hgm-slideshow__image hgm-lazy">
                        <figcaption>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, etc.</figcaption>
                    </figure><!-- &__image -->
                </li><!-- &__item -->
                <li class="hgm-slideshow__item">
                    <figure data-bg="https://img.freepik.com/free-photo/covid-recovery-center-female-doctor-holding-older-patient-s-hands_23-2148847832.jpg" class="hgm-slideshow__image hgm-lazy">
                        <figcaption>Contrary to popular belief, Lorem Ipsum is not simply random text.</figcaption>
                    </figure><!-- &__image -->
                </li><!-- &__item -->
            </ul><!-- &__list -->
            <div class="hgm-slideshow__nav hgm-slideshow__nav--next"></div><!-- &__nav -->
            <div class="hgm-slideshow__nav hgm-slideshow__nav--prev"></div><!-- &__nav -->
        </div><!-- .hgm-slideshow -->
    </div>
</div>
 
<div class="row">
    <div class="col-sm-12 col-lg-10">
        <div class="hgm-slideshow" data-click-count="0" data-caption-position="top">
        <ul class="hgm-slideshow__list">
            <li class="hgm-slideshow__item">
                <figure data-bg="https://img.freepik.com/free-photo/team-young-specialist-doctors-standing-corridor-hospital_1303-21198.jpg" class="hgm-slideshow__image hgm-lazy">
                    <figcaption>Caption goes here and can be a long sentence or two.</figcaption>
                </figure><!-- &__image -->
            </li><!-- &__item -->
            <li class="hgm-slideshow__item">
                <figure data-bg="https://img.freepik.com/free-photo/team-young-specialist-doctors-standing-corridor-hospital_1303-21199.jpg" class="hgm-slideshow__image hgm-lazy">
                    <figcaption>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words.</figcaption>
                </figure><!-- &__image -->
            </li><!-- &__item -->
            <li class="hgm-slideshow__item">
                <figure data-bg="https://img.freepik.com/free-photo/portrait-friendly-doctor-isolated-gray_1328-5420.jpg" class="hgm-slideshow__image hgm-lazy">
                    <figcaption>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</figcaption>
                </figure><!-- &__image -->
            </li><!-- &__item -->
            <li class="hgm-slideshow__item">
                <figure data-bg="https://img.freepik.com/premium-photo/three-medical-intern-looking-through-x-ray-image-lungs-viral-pneumonia-covid-19-patient-clinic-medical-concept_359031-1555.jpg" class="hgm-slideshow__image hgm-lazy">
                    <figcaption>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.</figcaption>
                </figure><!-- &__image -->
            </li><!-- &__item -->
            <li class="hgm-slideshow__item">
                <figure data-bg="https://img.freepik.com/free-photo/hands-unrecognizable-female-doctor-writing-form-typing-laptop-keyboard_1098-20374.jpg" class="hgm-slideshow__image hgm-lazy">
                    <figcaption>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, etc.</figcaption>
                </figure><!-- &__image -->
            </li><!-- &__item -->
            <li class="hgm-slideshow__item">
                <figure data-bg="https://img.freepik.com/free-photo/covid-recovery-center-female-doctor-holding-older-patient-s-hands_23-2148847832.jpg" class="hgm-slideshow__image hgm-lazy">
                    <figcaption>Contrary to popular belief, Lorem Ipsum is not simply random text.</figcaption>
                </figure><!-- &__image -->
            </li><!-- &__item -->
        </ul><!-- &__list -->
        <div class="hgm-slideshow__nav hgm-slideshow__nav--next"></div><!-- &__nav -->
        <div class="hgm-slideshow__nav hgm-slideshow__nav--prev"></div><!-- &__nav -->
    </div><!-- .hgm-slideshow -->
</div>
</div>
 
/* No context defined. */

Customizaton via Data Attributes

Use data attributes directly on the slideshow component to change the visual behavior; the following data attributes are currently in use:

  • data-hide-arrows set value to 1 to hide the next and previous arrows
  • data-hide-thumbnails set value to 1 to hide the thumbnail navigation strip
  • data-hide-dots set the value to 1 to hide the dot navigation strip
  • data-caption-postion set the value to either “top” or “bottom” to place the image captions either flush top or flush bottom of the slideshow; default position is absolute center
  • data-caption-bg-hex set the caption background hex color dynamically; hash tag is optional
  • data-caption-bg-alpha dynamically adjust the opacity of the caption background color; a value between 1 & 99 is expected