Marquee Carousel: Default

<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 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-12">
                            <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">
                    <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">
                    <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-6">
                            <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>