How can I add a progress bar to GlideJS or LightSlider?

I want to add a progress bar to GlideJS or LightSlider, how do I achieve this?

**GlideJS** https://glidejs.com/docs/setup/

The first slider plugin will be GlideJs which is the most common one we use. The second plugin will be LightSlider which is used on some older websites, as this is built using JQuery - GlideJS is preferred.

Once you have installed GlideJS using NPM and set up the glider as normal. You will need to add some extra HTML and JS to have the progress bar. (see the .m-glide-cotnrols-block div).

This is achieved by calling a custom updateSliderProgress(progressIndicator, slideIndex, slideCount) function; As you can see we need to pass in the Progress Indicator Element, the Slide Index and the Slide Count. This calculates a percentage based on the slide count and the current index and sets the width of the progress indicator element by using css inline styles.

**Refs: **
This has been done on Burstow & Hewett.
https://bitbucket.org/wrdev/client-burstow-hewett/src/master/code/website/Views/Partials/Organisms/Components/lots-slider-block.cshtml

https://bitbucket.org/wrdev/client-burstow-hewett/src/master/code/website/src/js/apps/websiteUtil/src/index.js

<div class="glide js-carousel">
    <div class="glide__track" data-glide-el="track">
        <ul class="glide__slides">
            <li class="glide__slide"></li>
            <li class="glide__slide"></li>
            <li class="glide__slide"></li>
        </ul>
    </div>
    <div class="m-glide-controls-block" data-glide-el="controls">
        <button data-glide-dir="<" class="a-slider-arrow-button v-button-clear-styling">
            <i class="far fa-chevron-left"></i>
        </button>

        <div class="progress-container">
            <span></span>
        </div>

        <button data-glide-dir=">" class=" v-button-clear-styling a-slider-arrow-button">
            <i class="far fa-chevron-right"></i>
        </button>
    </div>
</div>

JS

const carousels = document.querySelectorAll(".glide.js-carousel");

// custom SLider Progress bar
const updateSliderProgress = (progressContainer, currentSlideIndex, count) => {
    let index = currentSlideIndex + 1;
    const percentage = `${(index / count) * 100}%`;

    progressContainer.style.width = percentage;
};

if (carousels) {
    carousels.forEach(carousel => {
        let initCarousel = true;
        const ww = window.innerWidth;
        const carouselCount = carousel.querySelectorAll(".glide__slide").length;
        const progressIndicator = carousel.querySelector(
            ".m-glide-controls-block .progress-container span"
        );

        const glideCarousel = new Glide(`#${carousel.getAttribute("id")}`, {
            type: "carousel",
            perView: 4,
            breakpoints: {
                1023: {
                    perView: 2
                },
                600: {
                    perView: 1
                }
            }
        });

        if (progressIndicator) {
            glideCarousel.on("move", () => {
                updateSliderProgress(
                    progressIndicator,
                    glideCarousel.index,
                    carouselCount
                );
            });
        }

        if (initCarousel) {
            glideCarousel.mount();
        }
    });
}

**LightSlider**

For the LightSlider plugin, it is essentially the same, however this is using ES5 and Jquery. LightSlider does not provide a current slide index. So we will add an index to each slide from the C# loop and pass this into JS via a data attribute named "data-slide-index".

**Refs:**
This has been done on Le Gallais.
https://bitbucket.org/wrdev/client-le-gallais/src/develop/Code/Website/Views/Partials/StorageMicrosite/StackedContent/SMVideoSlider.cshtml

@if (m.HasValue("videoSlider"))
{
    var videoSlider = m.GetPropertyValue<IEnumerable<IPublishedContent>>("videoSlider");
    var slideIndex = 0;

    <ul id="lightSlider">
        @foreach (var slide in videoSlider)
        {
            slideIndex++;
            <li data-slide-index="@slideIndex"></li>
        }

    </ul>
    <div class="progress-cont-outer">
        <div class="progress-container">
            <span></span>
        </div>
    </div>
}

<script>
    wrLoader.iNeed(
        { "url": "/scripts/min/jquery.min.js" },
        { "url": "/scripts/min/lightslider.min.js" }
    ).then(function () {

        $("#lightSlider").lightSlider({
            item:3,
            loop:true,
            slideMove:1,
            easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
            speed: 600,
            controls: true,
            responsive : [
                {
                    breakpoint:800,
                    settings: {
                        item:2,
                        slideMove:1,
                        slideMargin:6,
                    }
                },
                {
                    breakpoint:530,
                    settings: {
                        item:1,
                        slideMove:1
                    }
                }
            ],
            onBeforeSlide: function (el) {
                var slideCount = $('#lightSlider .lslide').length
                var slideIndex = $('#lightSlider .lslide.active').data("slideIndex") + 1;
                var slider = document.querySelector(".video-slider-container");
                var progressIndicator = slider.querySelector(".progress-container span");

                if (slideIndex > slideCount) {
                    slideIndex = 1;
                }

                function updateSliderProgress(progressContainer, currentSlideIndex, count) {
                    var index = currentSlideIndex;
                    var percentage = `${(index / count) * 100}%`;
                    progressContainer.style.width = percentage;
                };

                updateSliderProgress(progressIndicator, slideIndex, slideCount);

            }
        });
    });
</script>