Slider

Can be called from Content

Configuration options

These options can be changed by setting template variables before the component block.

$name has to be unique! If any name is not unique and is used with different slider, both sliders won't work as expected.

Code

Latte

{default $slides = []}
{default $name = ''}
{default $perView = 3}
{default $pathToSlide = ''}

<div class="slider__container" n:if="$slides !== []">
    <div class="slider__content --content">
        <div class="slider__wrap --row --flex-wrap">
            <div class="slider">
                <div class="slider__slider-glide glide js--{$name} ">
                    <div class="glide__track" data-glide-el="track">

                        <div class="slider__slides glide__slides">
                            {foreach $slides as $item}
                                <div class="slider__item slider-item">
                                    {include $pathToSlide, item=>$item}
                                </div>
                            {/foreach}
                        </div>

                        <div class="glide__arrows">
                            <div class="glide__arrow glide__arrow--left">
                                <img src="/img/arrow-left.svg" class="glide__arrow-icon">
                            </div>
                            <div class="glide__arrow glide__arrow--right">
                                <img src="/img/arrow-left.svg" class="glide__arrow-icon">
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    document.addEventListener("DOMContentLoaded", function (event) {
        {var $selector = '.js--' . $name}
        const element = document.querySelector({$selector});
        const currentCarousel = element.querySelector('.glide__slides');
        const commonGlide = new Glide(element, {
            type: 'slider',
            startAt: 0,
            perView: {$perView},
            dragThreshold: false,

            //Modify breakpoints as needed

            // breakpoints: {
            //     960: {
            //         perView: 1,
            //     },
            //     1260: {
            //         perView: 2,
            //     }
            // },

            peek: {
                before: 0,
                after: 0
            },
            useTransform: true,
            gap: 54,
        });

        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(">");
                })
            }
        }

        const revItems = [...document.querySelectorAll(".slider-item")];

        revItems.forEach(item => {
            const showMoreButton = item.querySelector(".slider-item__more");
            const showLessButton = item.querySelector(".slider-item__less");
            const textElement = item.querySelector(".slider-item__text");

            const difference = textElement.scrollHeight - textElement.clientHeight;
            if (difference <= 22) { // or another threshold that works for you
                showMoreButton.style.display = 'none';
            }

            showMoreButton.addEventListener("click", (e) => {
                e.preventDefault();
                textElement.classList.add("slider-item__text--expanded");
                showMoreButton.style.display = 'none';
                showLessButton.style.display = 'block';
            });

            showLessButton.addEventListener("click", (e) => {
                e.preventDefault();
                textElement.classList.remove("slider-item__text--expanded");
                showMoreButton.style.display = 'block';
                showLessButton.style.display = 'none';
            });
        });

    });


</script>

SCSS

.slider__container{
  padding-top: 2.5rem;
  padding-bottom: 2rem;
  max-width: 1920px;
  margin: 0 auto;

  @include media($medium){
    padding-top: 3rem;
    padding-bottom: 5rem;
  }

  @include media($large){
    padding-top: 6rem;
    padding-bottom: 9rem;
  }


}

.slider {
  position: relative;
  width: 100%;
}

.glide__arrows{
  display: flex;
  gap: 30px;
  margin: 20px 0;
  align-items: center;
  justify-content: center;

}

.glide__arrow{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: $color__bg-dark;
  border-radius: $radius;

  @include media(1805px){
    position: absolute;
    z-index: 1;
    top: 0;
    margin: auto 0;
    bottom: 0;
    width: 5.1rem;
    height: 5.1rem;
  }

}

.glide__arrow--right{
  right: -7rem;
}

.glide__arrow--left{
  transform: rotate(180deg);
  left: -8rem;
}

.glide__arrow-icon{
  height: 1.6rem;
  width: 1.1rem;
  fill: $color__text-light;

  @include media(1805px){
    height: 2.9rem;
    width: 1.6rem;
  }

}

.slider__slides{
  justify-content: space-around;
  overflow: visible;
  margin-top: 0.9rem;
}

Examples

{include ./slider.latte, slides=>$slides, name=>'defaultSlider', pathToSlide=>'./slide.latte', perView=>2}