Image Carousel: More Options

<div class="glide hgm-image-carousel" data-slide-border="1" data-image-position="center" data-carousel-gap="25" data-carousel-per-view="4">
    <div class="container">
        <div class="hgm-image-carousel__header row">
            <div class="col-sm-12">
                <h3>Image carousel heading</h3>
                <p>Add a header or some messaging about this carousel content to clue users in on what they are seeing.</p>
            </div>
            <div class="col-sm-12">
                <a href="#" title="Learn more">View more images &nbsp;<i class="fa-solid fa-chevron-right"></i></a>
            </div>
        </div><!-- &__header -->
        <div class="glide__track" data-glide-el="track">
            <ul class="glide__slides">
                <li class="glide__slide">
                    <div class="hgm-image-carousel__slide-component">
                        <a href="http://cnn.com"><span class="sr-only">Visit CNN</span></a>
                        <img class="hgm-lazy-carousel" data-src="https://img.freepik.com/premium-photo/modern-hospital-with-stateoftheart-equipment-skilled-medical-professionals_1279788-7315.jpg" />
                    </div>
                </li>
                <li class="glide__slide">
                    <div class="hgm-image-carousel__slide-component">
                        <a href="http://google.com"><span class="sr-only">Visit Google</span></a>
                        <img class="hgm-lazy-carousel" data-src="https://img.freepik.com/free-photo/team-young-specialist-doctors-standing-corridor-hospital_1303-21199.jpg" />
                    </div>
                </li>
                <li class="glide__slide">
                    <div class="hgm-image-carousel__slide-component">
                        <a href="http://webmd.com"><span class="sr-only">Visit WebMD</span></a>
                        <img class="hgm-lazy-carousel" data-src="https://img.freepik.com/free-photo/portrait-friendly-doctor-isolated-gray_1328-5420.jpg" />
                    </div>
                </li>
                <li class="glide__slide">
                    <div class="hgm-image-carousel__slide-component">
                        <a href="http://webmdignite.com"><span class="sr-only">Visit WebMD Ignite</span></a>
                        <img class="hgm-lazy-carousel" data-src="https://img.freepik.com/free-photo/young-doctor-supporting-his-patient_1098-2237.jpg" />
                    </div>
                </li>
                <li class="glide__slide">
                    <div class="hgm-image-carousel__slide-component">
                        <a href="http://krames.com"><span class="sr-only">Visit Krames</span></a>
                        <img class="hgm-lazy-carousel" data-src="https://img.freepik.com/free-photo/covid-recovery-center-female-doctor-holding-older-patient-s-hands_23-2148847832.jpg" />
                    </div>
                </li>
            </ul>
        </div><!-- &__track -->
        <div class="hgm-image-carousel__footer row">
            <div class="glide__bullets col-md-8" 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 col-md-4" 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><!-- &__footer -->
    </div><!-- container -->
</div><!-- hgm-image-carousel -->