Glide

First we add js files to the compilation (webpack.mix.js), these are glide.js and glide_extension.js (the extension contains CustomLength and VisibleClass).

Example HTML

{* Product slider *}

<div class="case-studies-slider" n:if="!empty($items)">

    {* Product slider | Title *}

    {* Product slider | js slider *}
    <div class="case-studies-slider__content --content">
        <div class="case-studies-slider__glide glide js--case-studies-slider --w-12">

            <div class="glide__track" data-glide-el="track">

                <div class="glide__slides">

                    {foreach $items as $item}
                        {include './case-study-item.latte', item => $item}
                    {/foreach}
                </div>

                <div class="glide__arrows">
                    <div class="glide__arrow glide__arrow--left"></div>
                    <div class="glide__arrow glide__arrow--right"></div>
                </div>

            </div>

        </div>
    </div>

</div>

JavaScript

The function of arrows works better with custom settings - see here

 const element = document.querySelector('.js--case-studies-slider');
    if(element){
        const currentCarousel = element.querySelector('.glide__slides');
        const commonGlide = new Glide(element, {
            type: 'slider',
            startAt: 0,
            perView: 1,
            breakpoints: {
                960: {
                    perView: 1,
                    peek: 0
                },
            },
            peek: {
                before: 0,
                after: 0
            },
            touchRatio: 1,
            useTransform: true,
            gap: 13,
        });

        commonGlide.on(['mount', 'mount.after', 'run'], function () {
            setTimeout(() => {
                currentCarousel.style.transform = 'translate3d(' + Math.round(
                  currentCarousel.style.transform.substring(
                    currentCarousel.style.transform.indexOf('(') + 1, currentCarousel.style.transform.indexOf('px')
                  )
                ) + 'px, 0px, 0px) translateZ(0)';
            }, 500);
        });

        commonGlide.mount({
            CustomLength,
            VisibleClass
        });

        if (element) {
            let arrowLeft = element.querySelector(".glide__arrow--left");
            let arrowRight = element.querySelector(".glide__arrow--right");

            if (arrowLeft && arrowRight) {
                arrowLeft.addEventListener("click", function (e) {
                    commonGlide.go("<");
                });
                arrowRight.addEventListener("click", function (e) {
                    commonGlide.go(">");
                })
            }
        }
    }