Net7 UI Kit

Carousel 

<section class="py-6">

    <div class="n7-container">
        <div class="n7-wrapper-title grid lg:flex lg:items-start lg:justify-between gap-8">
            <div class="justify-self-stretch">
                <h2 class="n7-heading-3">
                    Titolo sezione
                </h2>

            </div>

            <a href="#" class="n7-btn 
    n7-btn--primary
    hidden lg:inline-flex">

                Vedi tutti i ...

            </a>

        </div>

        <div class="n7-carousel splide min-w-0 md:px-6 lg:px-8 xl:px-12" aria-label="Titolo sezione">

            <div class="n7-carousel__arrows splide__arrows">
                <button class="n7-carousel__arrow n7-carousel__arrow--prev splide__arrow splide__arrow--prev"> <svg class="n7-icon inline-block align-middle fill-current n7-slider__arrow-svg" aria-hidden="true" focusable="false" role="img">
                        <use href="../../icons.svg#solid--chevron-right" />
                    </svg>

                    <span class="sr-only">Precedente</span>
                </button>
                <button class="n7-carousel__arrow n7-carousel__arrow--next splide__arrow splide__arrow--next">
                    <svg class="n7-icon inline-block align-middle fill-current n7-slider__arrow-svg" aria-hidden="true" focusable="false" role="img">
                        <use href="../../icons.svg#solid--chevron-right" />
                    </svg>

                    <span class="sr-only">Successiva</span>
                </button>
            </div>

            <div class="n7-carousel-wrapper splide__track">
                <ul class="n7-carousel__list splide__list space-y-6 md:space-y-0">

                    <li class="n7-carousel-col splide__slide">
                        <div class="n7-card grid
  
 
 
 
 
 
  shadow-sm hover:shadow-lg">

                            <div class="n7-card__image
  ">
                                <img class="w-full aspect-video object-cover " alt="" src="/images/feathers.jpg" />
                            </div>

                            <div class="n7-card__content grid gap-4
   ">

                                <div class="n7-card__heading flex flex-col-reverse  gap-4">
                                    <h3 class="n7-card__title text-2xl font-bold">
                                        <a class="hover:underline" href="">
                                            Componente card default con click solo su titolo e cta

                                        </a>
                                    </h3>

                                    <div class="flex items-baseline justify-between">

                                        <div class="n7-card__categories">
                                            <span class="n7-category n7-content-placeholder ">
                                                Categoria
                                            </span>
                                        </div>

                                        <div class="n7-card__date text-sm">
                                            <time datetime="2023-09-30">30.09.2023</time>
                                        </div>

                                    </div>

                                </div>

                                <p class="n7-card__description text-lg">
                                    testo da configurazione
                                </p>

                                <div class="n7-card__action-area ">

                                    <a href="#" class="n7-btn 
    n7-btn--icon-right group/button cursor-pointer n7-btn--primary">

                                        Card Cta

                                        <svg class="n7-icon inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 transition-all duration-200 ease-out transform group-hover/button:translate-x-1" aria-hidden="true" focusable="false" role="img">
                                            <use href="../../icons.svg#mini--chevron-right" />
                                        </svg>

                                    </a>

                                </div>

                                <ul class="flex gap-2 flex-wrap mt-auto" aria-label="Categorie">

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                </ul>

                            </div>
                            </article>
                    </li>

                    <li class="n7-carousel-col splide__slide">
                        <div class="n7-card grid
  
 
 
 
 
 
  shadow-sm hover:shadow-lg">

                            <div class="n7-card__image
  ">
                                <img class="w-full aspect-video object-cover " alt="" src="/images/feathers.jpg" />
                            </div>

                            <div class="n7-card__content grid gap-4
   ">

                                <div class="n7-card__heading flex flex-col-reverse  gap-4">
                                    <h3 class="n7-card__title text-2xl font-bold">
                                        <a class="hover:underline" href="">
                                            Componente card default con click solo su titolo e cta

                                        </a>
                                    </h3>

                                    <div class="flex items-baseline justify-between">

                                        <div class="n7-card__categories">
                                            <span class="n7-category n7-content-placeholder ">
                                                Categoria
                                            </span>
                                        </div>

                                        <div class="n7-card__date text-sm">
                                            <time datetime="2023-09-30">30.09.2023</time>
                                        </div>

                                    </div>

                                </div>

                                <p class="n7-card__description text-lg">
                                    testo da configurazione
                                </p>

                                <div class="n7-card__action-area ">

                                    <a href="#" class="n7-btn 
    n7-btn--icon-right group/button cursor-pointer n7-btn--primary">

                                        Card Cta

                                        <svg class="n7-icon inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 transition-all duration-200 ease-out transform group-hover/button:translate-x-1" aria-hidden="true" focusable="false" role="img">
                                            <use href="../../icons.svg#mini--chevron-right" />
                                        </svg>

                                    </a>

                                </div>

                                <ul class="flex gap-2 flex-wrap mt-auto" aria-label="Categorie">

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                </ul>

                            </div>
                            </article>
                    </li>

                    <li class="n7-carousel-col splide__slide">
                        <div class="n7-card grid
  
 
 
 
 
 
  shadow-sm hover:shadow-lg">

                            <div class="n7-card__image
  ">
                                <img class="w-full aspect-video object-cover " alt="" src="/images/feathers.jpg" />
                            </div>

                            <div class="n7-card__content grid gap-4
   ">

                                <div class="n7-card__heading flex flex-col-reverse  gap-4">
                                    <h3 class="n7-card__title text-2xl font-bold">
                                        <a class="hover:underline" href="">
                                            Componente card default con click solo su titolo e cta

                                        </a>
                                    </h3>

                                    <div class="flex items-baseline justify-between">

                                        <div class="n7-card__categories">
                                            <span class="n7-category n7-content-placeholder ">
                                                Categoria
                                            </span>
                                        </div>

                                        <div class="n7-card__date text-sm">
                                            <time datetime="2023-09-30">30.09.2023</time>
                                        </div>

                                    </div>

                                </div>

                                <p class="n7-card__description text-lg">
                                    testo da configurazione
                                </p>

                                <div class="n7-card__action-area ">

                                    <a href="#" class="n7-btn 
    n7-btn--icon-right group/button cursor-pointer n7-btn--primary">

                                        Card Cta

                                        <svg class="n7-icon inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 transition-all duration-200 ease-out transform group-hover/button:translate-x-1" aria-hidden="true" focusable="false" role="img">
                                            <use href="../../icons.svg#mini--chevron-right" />
                                        </svg>

                                    </a>

                                </div>

                                <ul class="flex gap-2 flex-wrap mt-auto" aria-label="Categorie">

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                </ul>

                            </div>
                            </article>
                    </li>

                    <li class="n7-carousel-col splide__slide">
                        <div class="n7-card grid
  
 
 
 
 
 
  shadow-sm hover:shadow-lg">

                            <div class="n7-card__image
  ">
                                <img class="w-full aspect-video object-cover " alt="" src="/images/feathers.jpg" />
                            </div>

                            <div class="n7-card__content grid gap-4
   ">

                                <div class="n7-card__heading flex flex-col-reverse  gap-4">
                                    <h3 class="n7-card__title text-2xl font-bold">
                                        <a class="hover:underline" href="">
                                            Componente card default con click solo su titolo e cta

                                        </a>
                                    </h3>

                                    <div class="flex items-baseline justify-between">

                                        <div class="n7-card__categories">
                                            <span class="n7-category n7-content-placeholder ">
                                                Categoria
                                            </span>
                                        </div>

                                        <div class="n7-card__date text-sm">
                                            <time datetime="2023-09-30">30.09.2023</time>
                                        </div>

                                    </div>

                                </div>

                                <p class="n7-card__description text-lg">
                                    testo da configurazione
                                </p>

                                <div class="n7-card__action-area ">

                                    <a href="#" class="n7-btn 
    n7-btn--icon-right group/button cursor-pointer n7-btn--primary">

                                        Card Cta

                                        <svg class="n7-icon inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 transition-all duration-200 ease-out transform group-hover/button:translate-x-1" aria-hidden="true" focusable="false" role="img">
                                            <use href="../../icons.svg#mini--chevron-right" />
                                        </svg>

                                    </a>

                                </div>

                                <ul class="flex gap-2 flex-wrap mt-auto" aria-label="Categorie">

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                </ul>

                            </div>
                            </article>
                    </li>

                    <li class="n7-carousel-col splide__slide">
                        <div class="n7-card grid
  
 
 
 
 
 
  shadow-sm hover:shadow-lg">

                            <div class="n7-card__image
  ">
                                <img class="w-full aspect-video object-cover " alt="" src="/images/feathers.jpg" />
                            </div>

                            <div class="n7-card__content grid gap-4
   ">

                                <div class="n7-card__heading flex flex-col-reverse  gap-4">
                                    <h3 class="n7-card__title text-2xl font-bold">
                                        <a class="hover:underline" href="">
                                            Componente card default con click solo su titolo e cta

                                        </a>
                                    </h3>

                                    <div class="flex items-baseline justify-between">

                                        <div class="n7-card__categories">
                                            <span class="n7-category n7-content-placeholder ">
                                                Categoria
                                            </span>
                                        </div>

                                        <div class="n7-card__date text-sm">
                                            <time datetime="2023-09-30">30.09.2023</time>
                                        </div>

                                    </div>

                                </div>

                                <p class="n7-card__description text-lg">
                                    testo da configurazione
                                </p>

                                <div class="n7-card__action-area ">

                                    <a href="#" class="n7-btn 
    n7-btn--icon-right group/button cursor-pointer n7-btn--primary">

                                        Card Cta

                                        <svg class="n7-icon inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 transition-all duration-200 ease-out transform group-hover/button:translate-x-1" aria-hidden="true" focusable="false" role="img">
                                            <use href="../../icons.svg#mini--chevron-right" />
                                        </svg>

                                    </a>

                                </div>

                                <ul class="flex gap-2 flex-wrap mt-auto" aria-label="Categorie">

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                </ul>

                            </div>
                            </article>
                    </li>

                    <li class="n7-carousel-col splide__slide">
                        <div class="n7-card grid
  
 
 
 
 
 
  shadow-sm hover:shadow-lg">

                            <div class="n7-card__image
  ">
                                <img class="w-full aspect-video object-cover " alt="" src="/images/feathers.jpg" />
                            </div>

                            <div class="n7-card__content grid gap-4
   ">

                                <div class="n7-card__heading flex flex-col-reverse  gap-4">
                                    <h3 class="n7-card__title text-2xl font-bold">
                                        <a class="hover:underline" href="">
                                            Componente card default con click solo su titolo e cta

                                        </a>
                                    </h3>

                                    <div class="flex items-baseline justify-between">

                                        <div class="n7-card__categories">
                                            <span class="n7-category n7-content-placeholder ">
                                                Categoria
                                            </span>
                                        </div>

                                        <div class="n7-card__date text-sm">
                                            <time datetime="2023-09-30">30.09.2023</time>
                                        </div>

                                    </div>

                                </div>

                                <p class="n7-card__description text-lg">
                                    testo da configurazione
                                </p>

                                <div class="n7-card__action-area ">

                                    <a href="#" class="n7-btn 
    n7-btn--icon-right group/button cursor-pointer n7-btn--primary">

                                        Card Cta

                                        <svg class="n7-icon inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 transition-all duration-200 ease-out transform group-hover/button:translate-x-1" aria-hidden="true" focusable="false" role="img">
                                            <use href="../../icons.svg#mini--chevron-right" />
                                        </svg>

                                    </a>

                                </div>

                                <ul class="flex gap-2 flex-wrap mt-auto" aria-label="Categorie">

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                </ul>

                            </div>
                            </article>
                    </li>

                    <li class="n7-carousel-col splide__slide">
                        <div class="n7-card grid
  
 
 
 
 
 
  shadow-sm hover:shadow-lg">

                            <div class="n7-card__image
  ">
                                <img class="w-full aspect-video object-cover " alt="" src="/images/feathers.jpg" />
                            </div>

                            <div class="n7-card__content grid gap-4
   ">

                                <div class="n7-card__heading flex flex-col-reverse  gap-4">
                                    <h3 class="n7-card__title text-2xl font-bold">
                                        <a class="hover:underline" href="">
                                            Componente card default con click solo su titolo e cta

                                        </a>
                                    </h3>

                                    <div class="flex items-baseline justify-between">

                                        <div class="n7-card__categories">
                                            <span class="n7-category n7-content-placeholder ">
                                                Categoria
                                            </span>
                                        </div>

                                        <div class="n7-card__date text-sm">
                                            <time datetime="2023-09-30">30.09.2023</time>
                                        </div>

                                    </div>

                                </div>

                                <p class="n7-card__description text-lg">
                                    testo da configurazione
                                </p>

                                <div class="n7-card__action-area ">

                                    <a href="#" class="n7-btn 
    n7-btn--icon-right group/button cursor-pointer n7-btn--primary">

                                        Card Cta

                                        <svg class="n7-icon inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 transition-all duration-200 ease-out transform group-hover/button:translate-x-1" aria-hidden="true" focusable="false" role="img">
                                            <use href="../../icons.svg#mini--chevron-right" />
                                        </svg>

                                    </a>

                                </div>

                                <ul class="flex gap-2 flex-wrap mt-auto" aria-label="Categorie">

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                </ul>

                            </div>
                            </article>
                    </li>

                    <li class="n7-carousel-col splide__slide">
                        <div class="n7-card grid
  
 
 
 
 
 
  shadow-sm hover:shadow-lg">

                            <div class="n7-card__image
  ">
                                <img class="w-full aspect-video object-cover " alt="" src="/images/feathers.jpg" />
                            </div>

                            <div class="n7-card__content grid gap-4
   ">

                                <div class="n7-card__heading flex flex-col-reverse  gap-4">
                                    <h3 class="n7-card__title text-2xl font-bold">
                                        <a class="hover:underline" href="">
                                            Componente card default con click solo su titolo e cta

                                        </a>
                                    </h3>

                                    <div class="flex items-baseline justify-between">

                                        <div class="n7-card__categories">
                                            <span class="n7-category n7-content-placeholder ">
                                                Categoria
                                            </span>
                                        </div>

                                        <div class="n7-card__date text-sm">
                                            <time datetime="2023-09-30">30.09.2023</time>
                                        </div>

                                    </div>

                                </div>

                                <p class="n7-card__description text-lg">
                                    testo da configurazione
                                </p>

                                <div class="n7-card__action-area ">

                                    <a href="#" class="n7-btn 
    n7-btn--icon-right group/button cursor-pointer n7-btn--primary">

                                        Card Cta

                                        <svg class="n7-icon inline-block align-middle fill-current w-4 h-4 md:w-5 md:h-5 transition-all duration-200 ease-out transform group-hover/button:translate-x-1" aria-hidden="true" focusable="false" role="img">
                                            <use href="../../icons.svg#mini--chevron-right" />
                                        </svg>

                                    </a>

                                </div>

                                <ul class="flex gap-2 flex-wrap mt-auto" aria-label="Categorie">

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                    <li><span class="n7-chip   n7-chip--sm">
                                            label</span></li>

                                </ul>

                            </div>
                            </article>
                    </li>

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

        <div class="flex py-8 justify-center lg:hidden">
            <a href="#" class="n7-btn 
    n7-btn--primary
    ">

                Vedi tutti i ...

            </a>

        </div>
    </div>
</section>
 
<section class="py-6">

    <div class="n7-container">
        <div class="n7-wrapper-title grid lg:flex lg:items-start lg:justify-between gap-8">
            <div class="justify-self-stretch">
                <h2 class="n7-heading-3">
                    Titolo sezione
                </h2>

            </div>
           
             {% render '@button',{ href:'#', classes: 'hidden lg:inline-flex', label:'Vedi tutti i ...'}, true %}
        </div>


        <div class="n7-carousel splide min-w-0 md:px-6 lg:px-8 xl:px-12" aria-label="Titolo sezione">
                        {# Arrows #}
            <div class="n7-carousel__arrows splide__arrows">
                <button
                    class="n7-carousel__arrow n7-carousel__arrow--prev splide__arrow splide__arrow--prev"
                > {% render '@icon', {id: 'solid--chevron-right', classes:
                    'n7-slider__arrow-svg', size: ''}, true %}
                    <span class="sr-only">Precedente</span>
                </button>
                <button
                    class="n7-carousel__arrow n7-carousel__arrow--next splide__arrow splide__arrow--next"
                >
                    {% render '@icon', {id: 'solid--chevron-right', classes:
                    'n7-slider__arrow-svg', size: ''}, true %}
                    <span class="sr-only">Successiva</span>
                </button>
            </div>
           
                <div class="n7-carousel-wrapper splide__track">
                    <ul class="n7-carousel__list splide__list space-y-6 md:space-y-0">
                         {% for i in range(0,8) %}
                        <li class="n7-carousel-col splide__slide">
                        {% render '@card' %}
                        </li>
                        {% endfor %}
                    </ul>
                </div>
        </div>

        <div class="flex py-8 justify-center lg:hidden"> 
            {% render '@button',{ href:'#', label:'Vedi tutti i ...'}, true %}
         </div>
    </div>
</section>
 
/* No context defined. */
  • Content: 
    @layer components {
    /* CAROUSEL STYLE OVERRIDINGS */
    .n7-carousel {
        @apply w-full relative;
    }

    .n7-carousel-wrapper {
        @apply md:pb-12;
    }

    .n7-carousel.splide {
        @apply mb-0;
    }

    .n7-carousel .splide__list {
        @apply flex py-6;
    }

    .n7-carousel .splide__track {
        @apply flex-1 gap-4 overflow-hidden;
    }

    .n7-carousel .splide__track:after,
    .n7-carousel .splide__track:before {
        @apply hidden;
    }

    .n7-carousel .splide__slide {
        @apply !flex items-stretch flex-shrink-0;
    }

    .n7-carousel-col .splide__slide {
        @apply !h-auto;
    }

    .n7-carousel .splide__slide > div {
        @apply h-full flex-1;
    }


    /* Slider buttons arrows - next/prev */
    .n7-carousel .splide__arrows {
        @apply absolute top-1/2 left-0 right-0 -translate-y-1/2 w-full z-20;
    }

    .n7-carousel .splide__arrow {
        @apply absolute top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 md:w-10 md:h-10 lg:w-12 lg:h-12 opacity-100 n7-background-primary transition hover:n7-background-primary-dark rounded-none;
    }

    .n7-carousel .splide__arrow--prev {
        @apply -left-4 md:-left-6 lg:-left-12 xl:left-1;
    }

    .n7-carousel .splide__arrow--next {
        @apply -right-4 md:-right-6 lg:-right-12 xl:right-1;
    }

    .n7-carousel .splide__arrow--prev,
    .n7-carousel .splide__arrow--next {
        @apply focus:n7-button-primary-hover focus:outline-[color:unset] focus-visible:ring ring-white;
    }

    .n7-carousel .splide__arrow svg {
        @apply text-white w-8 h-8;
    }

    .n7-carousel .splide__arrow.slick-disabled {
        @apply opacity-70 hover:n7-button-secondary;
    }

    /* SLIDER DOTS CUSTOMIZATION */
    .n7-carousel .splide__pagination {
        @apply absolute bottom-0.5 block p-0 m-0 w-full list-none text-center;
    }

   .n7-carousel .splide__pagination__page.is-active {
    @apply bg-black opacity-100;
    }

    .n7-carousel .splide__pagination__page {
        @apply bg-black opacity-25 w-3 h-3 mx-2;
    }
}
  • URL: /components/raw/carousel/carousel.css
  • Filesystem Path: components/04-organisms/carousel/carousel.css
  • Size: 2.1 KB
  • Content: 
    /* if (typeof jQuery === 'undefined') {
    console.warn('jQuery non è caricato. Il carousel non verrà inizializzato.');
} else {
    jQuery(function ($) {
        'use strict';
        $(document).ready(function () {
            // Slick initialize function - use same settings, customize label and eventually other settings if needed
            function slickInitialization(carousel, label) {
                $(carousel).slick({
                    dots: true,
                    infinite: false,
                    regionLabel: label,
                    slidesToShow: 3,
                    slidesToScroll: 1,
                    arrowsPlacement: 'afterSlides',
                    nextArrow: '<button class="slick-next slick-arrow" type="button"><svg class="slick-arrow-svg inline-block align-middle fill-current w-full h-full" aria-hidden="true" focusable="false" role="img"><use xlink:href="/icons.svg#mini--chevron-right" /></svg></span><span class="slick-sr-only">Successiva</span></button>',
                    prevArrow: '<button class="slick-prev slick-arrow" type="button"><svg class="slick-arrow-svg inline-block align-middle fill-current w-full h-full" aria-hidden="true" focusable="false" role="img"><use xlink:href="/icons.svg#mini--chevron-left" /></svg></span><span class="slick-sr-only">Precedente</span></button>',
                    responsive: [
                        {
                            breakpoint: 1024,
                            settings: {
                                infinite: false,
                                slidesToShow: 2,
                                slidesToScroll: 1
                            }
                        },
                        {
                            breakpoint: 600,
                            settings: {
                                infinite: false,
                                slidesToShow: 1,
                                slidesToScroll: 1
                            }
                        }
                    ]
                });
            }

           
            if (document.querySelector('.n7-carousel')) {
                slickInitialization('.n7-carousel', 'Titolo label carousel');
            }
        });
    });
}
*/

document.addEventListener('DOMContentLoaded', function() {
    if (document.querySelector('.n7-carousel')) {
        var splide = new Splide('.n7-carousel', {
            perPage: 5,
            focus: 0,
            type: 'loop',
            omitEnd: true,
            perMove: 1,
            gap: '1.5rem',
            autoWidth: false,
            fixedWidth: false,
            debug: true,
            breakpoints: {
                1280: {
                    perPage: 4,
                },
                1024: {
                    perPage: 2,
                },
                768: {
                    destroy: true,
                    perPage: 2,
                    arrows: false,
                },
                640: {
                    destroy: true,
                    arrows: false,
                },
                480: {
                    perPage: 1,
                    arrows: false,
                },
            }
        });
        
        splide.mount();
    }
});
  • URL: /components/raw/carousel/carousel.js
  • Filesystem Path: components/04-organisms/carousel/carousel.js
  • Size: 3.3 KB

Carousel component

Instance of Splide.js

See documentation