Regione Toscana Design System Design System Servizi

Carousel: Carousel 5 Cols 

<section class="rtds-py-6">

    <div class="rtds-container-sm">

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

            </div>

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

                Vedi tutti i ...

            </a>

        </div>

        <div class="rtds-carousel splide rtds-carousel--5-cols" aria-label="Titolo sezione">

            <div class="rtds-carousel__arrows splide__arrows">
                <button class="rtds-carousel__arrow rtds-carousel__arrow--prev splide__arrow splide__arrow--prev" aria-label="Slide precedente">
                    <svg class="rtds-icon rtds-fill-current rtds-carousel__arrow-svg" aria-hidden="true" focusable="false" role="img">
                        <use href="../../icons.svg#solid--chevron-right" />
                    </svg>

                    <span class="rtds-sr-only">Slide precedente</span>
                </button>
                <button class="rtds-carousel__arrow rtds-carousel__arrow--next splide__arrow splide__arrow--next" aria-label="Slide successivo">
                    <svg class="rtds-icon rtds-fill-current rtds-carousel__arrow-svg" aria-hidden="true" focusable="false" role="img">
                        <use href="../../icons.svg#solid--chevron-right" />
                    </svg>

                    <span class="rtds-sr-only">Slide successivo</span>
                </button>
            </div>

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

                    <li class="rtds-carousel-col splide__slide">
                        <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                            <div class="rtds-card__content">

                                <div class="rtds-card__heading">

                                    <h3 class="rtds-card__title">
                                        <a class="group-hover/card:rtds-underline" href="">

                                            Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                        </a>
                                    </h3>

                                </div>

                                <div class="rtds-card__description ">
                                    <p>
                                        Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                    </p>
                                </div>

                                <ul class="rtds-card__tags" aria-label="Categorie">

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

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

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

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

                                </ul>

                            </div>

                        </article>

                    </li>

                    <li class="rtds-carousel-col splide__slide">
                        <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                            <div class="rtds-card__content">

                                <div class="rtds-card__heading">

                                    <h3 class="rtds-card__title">
                                        <a class="group-hover/card:rtds-underline" href="">

                                            Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                        </a>
                                    </h3>

                                </div>

                                <div class="rtds-card__description ">
                                    <p>
                                        Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                    </p>
                                </div>

                                <ul class="rtds-card__tags" aria-label="Categorie">

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

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

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

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

                                </ul>

                            </div>

                        </article>

                    </li>

                    <li class="rtds-carousel-col splide__slide">
                        <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                            <div class="rtds-card__content">

                                <div class="rtds-card__heading">

                                    <h3 class="rtds-card__title">
                                        <a class="group-hover/card:rtds-underline" href="">

                                            Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                        </a>
                                    </h3>

                                </div>

                                <div class="rtds-card__description ">
                                    <p>
                                        Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                    </p>
                                </div>

                                <ul class="rtds-card__tags" aria-label="Categorie">

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

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

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

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

                                </ul>

                            </div>

                        </article>

                    </li>

                    <li class="rtds-carousel-col splide__slide">
                        <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                            <div class="rtds-card__content">

                                <div class="rtds-card__heading">

                                    <h3 class="rtds-card__title">
                                        <a class="group-hover/card:rtds-underline" href="">

                                            Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                        </a>
                                    </h3>

                                </div>

                                <div class="rtds-card__description ">
                                    <p>
                                        Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                    </p>
                                </div>

                                <ul class="rtds-card__tags" aria-label="Categorie">

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

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

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

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

                                </ul>

                            </div>

                        </article>

                    </li>

                    <li class="rtds-carousel-col splide__slide">
                        <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                            <div class="rtds-card__content">

                                <div class="rtds-card__heading">

                                    <h3 class="rtds-card__title">
                                        <a class="group-hover/card:rtds-underline" href="">

                                            Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                        </a>
                                    </h3>

                                </div>

                                <div class="rtds-card__description ">
                                    <p>
                                        Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                    </p>
                                </div>

                                <ul class="rtds-card__tags" aria-label="Categorie">

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

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

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

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

                                </ul>

                            </div>

                        </article>

                    </li>

                    <li class="rtds-carousel-col splide__slide">
                        <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                            <div class="rtds-card__content">

                                <div class="rtds-card__heading">

                                    <h3 class="rtds-card__title">
                                        <a class="group-hover/card:rtds-underline" href="">

                                            Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                        </a>
                                    </h3>

                                </div>

                                <div class="rtds-card__description ">
                                    <p>
                                        Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                    </p>
                                </div>

                                <ul class="rtds-card__tags" aria-label="Categorie">

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

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

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

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

                                </ul>

                            </div>

                        </article>

                    </li>

                    <li class="rtds-carousel-col splide__slide">
                        <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                            <div class="rtds-card__content">

                                <div class="rtds-card__heading">

                                    <h3 class="rtds-card__title">
                                        <a class="group-hover/card:rtds-underline" href="">

                                            Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                        </a>
                                    </h3>

                                </div>

                                <div class="rtds-card__description ">
                                    <p>
                                        Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                    </p>
                                </div>

                                <ul class="rtds-card__tags" aria-label="Categorie">

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

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

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

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

                                </ul>

                            </div>

                        </article>

                    </li>

                    <li class="rtds-carousel-col splide__slide">
                        <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                            <div class="rtds-card__content">

                                <div class="rtds-card__heading">

                                    <h3 class="rtds-card__title">
                                        <a class="group-hover/card:rtds-underline" href="">

                                            Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                        </a>
                                    </h3>

                                </div>

                                <div class="rtds-card__description ">
                                    <p>
                                        Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                    </p>
                                </div>

                                <ul class="rtds-card__tags" aria-label="Categorie">

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

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

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

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

                                </ul>

                            </div>

                        </article>

                    </li>

                    <li class="rtds-carousel-col splide__slide">
                        <article class="rtds-card rtds-card--information rtds-bg-gradient-04
 is-card-fullclickable rtds-group/card">

                            <div class="rtds-card__content">

                                <div class="rtds-card__heading">

                                    <h3 class="rtds-card__title">
                                        <a class="group-hover/card:rtds-underline" href="">

                                            Nunc aliquam phasellus molestie blandit. Nisi, amet, id maecenas diam

                                        </a>
                                    </h3>

                                </div>

                                <div class="rtds-card__description ">
                                    <p>
                                        Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et.
                                    </p>
                                </div>

                                <ul class="rtds-card__tags" aria-label="Categorie">

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

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

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

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

                                </ul>

                            </div>

                        </article>

                    </li>

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

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

                Vedi tutti i ...

            </a>

        </div>

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

    <div class="rtds-container-sm">

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

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


        <div class="rtds-carousel splide{% if classes %} {{ classes }}{% endif %}" aria-label="Titolo sezione">
            {# Arrows #}
            <div class="rtds-carousel__arrows splide__arrows">
            <button
                class="rtds-carousel__arrow rtds-carousel__arrow--prev splide__arrow splide__arrow--prev"
                aria-label="Slide precedente"
            >
                {% render '@icon', {id: 'solid--chevron-right', classes:
                'rtds-carousel__arrow-svg', size: ''}, true %}
                <span class="rtds-sr-only">Slide precedente</span>
            </button>
            <button
                class="rtds-carousel__arrow rtds-carousel__arrow--next splide__arrow splide__arrow--next"
                aria-label="Slide successivo"
            >
                {% render '@icon', {id: 'solid--chevron-right', classes:
                'rtds-carousel__arrow-svg', size: ''}, true %}
                <span class="rtds-sr-only">Slide successivo</span>
            </button>
            </div>

            <div class="rtds-carousel-wrapper splide__track">
                <ul class="rtds-carousel__list splide__list rtds-space-y-6 md:rtds-space-y-0">
                {% for i in range(0,9) %}
                <li class="rtds-carousel-col splide__slide">
                    {% render '@card--information-with-gradient' %}
                </li>
                {% endfor %}
                </ul>
            </div>
        </div>

        <div class="rtds-flex rtds-py-8 rtds-justify-center lg:rtds-hidden"> 
            {% render '@button', { href:'#', label:'Vedi tutti i ...'}, true %}
        </div>

    </div>
</section>
 
{
  "classes": "rtds-carousel--5-cols"
}
  • Content: 
    /**
 * SLIDER
 *
*/
/* CARD SLIDE OVERRIDINGS */
.rtds-carousel .rtds-card,
    .rtds-carousel-col {
    display: inline-grid;
}
.rtds-carousel-col {
    padding-bottom: var(--spacing-2);
}
/* Slider buttons arrows - next/prev */
.rtds-carousel .splide__arrow {
    font-size: var(--fontsize-text-lg);
    letter-spacing: 0.025em;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-1);
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
    border-radius: 0.375rem;
    line-height: 1;
    font-weight: 700;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    border-width: 1px;
}
.rtds-carousel .splide__arrow[disabled] {
        background-color: var(--color-background-02);
        color: var(--color-button-disabled);
        border-color: var(--color-background-02);
        cursor: not-allowed;
    }
.rtds-carousel .splide__arrow[aria-disabled="true"] {
        background-color: var(--color-background-02);
        color: var(--color-button-disabled);
        border-color: var(--color-background-02);
        cursor: not-allowed;
    }
.rtds-dialog__actions .rtds-carousel .splide__arrow {
    flex: 1 1 0%;
}
@media (min-width: 1024px) {
    .rtds-dialog__actions .rtds-carousel .splide__arrow {
        flex: none;
    }
}
.rtds-carousel .splide__arrow {
    height: var(--spacing-8);
    width: var(--spacing-8);
    border-radius: 9999px;
    border-style: solid;
    border-color: currentColor;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: var(--spacing-0);
    opacity: 1;
        color: var(--color-content-primary);
    display: inline-flex;
    gap: var(--spacing-1);
    border-radius: 0.375rem;
    border-width: 1px;
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
    font-size: var(--fontsize-text-lg);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.025em;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    justify-content: center;
    align-items: center;
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}
.rtds-carousel .splide__arrow:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        background-color: var(--color-background-primary);
}
.rtds-carousel .splide__arrow:focus-visible {
    outline-color: var(--color-focusring);
}
@media (min-width: 768px) {
    .rtds-carousel .splide__arrow {
        height: var(--spacing-10);
        width: var(--spacing-10);
    }
}
@media (min-width: 1024px) {
    .rtds-carousel .splide__arrow {
        position: absolute;
        bottom: var(--spacing-4);
        right: var(--spacing-4);
        display: flex;
        height: var(--spacing-12);
        width: var(--spacing-12);
    }
}
.rtds-carousel .splide__arrow--next, .rtds-carousel .splide__arrow--prev {
    z-index: 20;
}
.rtds-carousel .splide__arrow--prev {
    left: calc(var(--spacing-4) * -1);
}
@media (min-width: 768px) {
    .rtds-carousel .splide__arrow--prev {
        left: calc(var(--spacing-8) * -1);
    }
}
@media (min-width: 1024px) {
    .rtds-carousel .splide__arrow--prev {
        left: calc(var(--spacing-12) * -1);
    }
}
@media (min-width: 1280px) {
    .rtds-carousel .splide__arrow--prev {
        left: calc(var(--spacing-14) * -1);
    }
}
@media (min-width: 1536px) {
    .rtds-carousel .splide__arrow--prev {
        left: calc(var(--spacing-16) * -1);
    }
}
.rtds-carousel .splide__arrow--next {
    right: calc(var(--spacing-4) * -1);
}
@media (min-width: 768px) {
    .rtds-carousel .splide__arrow--next {
        right: calc(var(--spacing-8) * -1);
    }
}
@media (min-width: 1024px) {
    .rtds-carousel .splide__arrow--next {
        right: calc(var(--spacing-12) * -1);
    }
}
@media (min-width: 1280px) {
    .rtds-carousel .splide__arrow--next {
        right: calc(var(--spacing-14) * -1);
    }
}
@media (min-width: 1536px) {
    .rtds-carousel .splide__arrow--next {
        right: calc(var(--spacing-16) * -1);
    }
}
/* Icon overriding */
.rtds-carousel.is-focus-in .splide__arrow:focus {
    outline-color: var(--color-focusring);
}
.rtds-carousel .splide__arrow svg {
       fill: currentColor;
    }
.rtds-carousel .splide__arrow .splide__arrow-svg {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.rtds-carousel .splide__arrow.splide__arrow--disabled {
    opacity: 0.7;
}
.rtds-carousel .splide__arrow.splide__arrow--disabled:hover {
        background-color: var(--color-button-secondary);
        border-color: var(--color-button-secondary);
    }
/* SLIDER DOTS CUSTOMIZATION */
.rtds-carousel .splide__dots {
    bottom: var(--spacing-0);
}
.rtds-carousel .splide__pagination {
    gap: var(--spacing-3);
    display: flex;
    justify-content: center;
    align-items: center;
}
.rtds-carousel .splide__pagination:focus {
    outline-color: var(--color-focusring);
}
@media (min-width: 768px) {
    .rtds-carousel .splide__pagination {
        bottom: calc(var(--spacing-10) * -1);
    }
}
.rtds-carousel.is-focus-in .splide__pagination__page:focus {
    outline-width: 2px;
    outline-color: var(--color-secondary-500);
}
.rtds-carousel .splide__pagination__page {
    height: var(--spacing-2-5);
    width: var(--spacing-2-5);
    opacity: 1;
        background-color: var(--color-background-05);
}
.rtds-carousel .splide__pagination__page:hover {
        background-color: var(--color-background-secondary);
    }
.rtds-carousel .splide__pagination__page.is-active {
    height: var(--spacing-3);
    width: var(--spacing-3);
        background-color: var(--color-background-secondary);
}
  • URL: /components/raw/carousel/carousel.built.css
  • Filesystem Path: components/04-organisms/carousel/carousel.built.css
  • Size: 6.1 KB
  • Content: 
    /**
 * SLIDER
 *
*/
@layer components {
    /* CARD SLIDE OVERRIDINGS */
    .rtds-carousel .rtds-card,
    .rtds-carousel-col {
        @apply rtds-inline-grid;
    }

    .rtds-carousel-col {
        @apply rtds-pb-2;
    }

    /* Slider buttons arrows - next/prev */
    .rtds-carousel .splide__arrow {
        @apply rtds-btn rtds-w-8 rtds-h-8 md:rtds-w-10 md:rtds-h-10 lg:rtds-w-12 lg:rtds-h-12 rtds-p-0 lg:rtds-flex lg:rtds-absolute lg:rtds-bottom-4 lg:rtds-right-4 rtds-content-primary rtds-bg-white rtds-border rtds-border-solid rtds-border-current rtds-rounded-full hover:rtds-background-primary hover:rtds-text-white rtds-transition-all focus-visible:rtds-outline-focusring rtds-opacity-100;
    }

    .rtds-carousel .splide__arrow--next, .rtds-carousel .splide__arrow--prev {
        @apply rtds-z-20;
    }

    .rtds-carousel .splide__arrow--prev {
        @apply -rtds-left-4 md:-rtds-left-8 lg:-rtds-left-12 xl:-rtds-left-14 2xl:-rtds-left-16;
    }

    .rtds-carousel .splide__arrow--next {
        @apply -rtds-right-4 md:-rtds-right-8 lg:-rtds-right-12 xl:-rtds-right-14 2xl:-rtds-right-16;
    }

    /* Icon overriding */

    .rtds-carousel.is-focus-in .splide__arrow:focus {
        @apply rtds-outline-focusring;
    }

    .rtds-carousel .splide__arrow svg {
       fill: currentColor;
    }

    .rtds-carousel .splide__arrow .splide__arrow-svg {
        @apply rtds-text-white;
    }

    .rtds-carousel .splide__arrow .splide__arrow-svg {
        @apply rtds-text-white;
    }

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

    /* SLIDER DOTS CUSTOMIZATION */
    .rtds-carousel .splide__dots {
        @apply rtds-bottom-0;
    }


    .rtds-carousel .splide__pagination {
        @apply md:-rtds-bottom-10 rtds-flex rtds-justify-center rtds-items-center rtds-gap-3 focus:rtds-outline-focusring;
    }

    .rtds-carousel.is-focus-in .splide__pagination__page:focus {
        @apply rtds-outline-secondary-500 rtds-outline-2;
    }

    .rtds-carousel .splide__pagination__page {
        @apply rtds-w-2.5 rtds-h-2.5 rtds-opacity-100 rtds-background-05 hover:rtds-background-secondary;
    }

    .rtds-carousel .splide__pagination__page.is-active {
        @apply rtds-background-secondary rtds-w-3 rtds-h-3;
    }

}
  • URL: /components/raw/carousel/carousel.css
  • Filesystem Path: components/04-organisms/carousel/carousel.css
  • Size: 2.3 KB
  • Content: 
    /* CAROUSEL
* SPLIDE INITIALIZATION
 */

/* CAROUSEL * SPLIDE INITIALIZATION */ 


// Configurazioni base per i carousel
var carouselConfigs = {
    default: {
        perPage: 3,
        type: 'loop',
        gap: '1.5rem',
        pagination: true,
        i18n: {
            prev: 'Precedente',
            next: 'Successivo',
            first: 'Vai al primo slide',
            last: 'Vai all\'ultimo slide',
            slideX: 'Vai allo slide %s',
            pageX: 'Vai alla pagina %s',
            slideLabel: '%s di %s',
            'slide %s': 'Slide %s',
            'Page %s': 'Pagina %s',
            select: 'Seleziona uno slide da visualizzare'
        },
        breakpoints: {
            1280: {
                perPage: 2,
            },
            1024: {
                perPage: 2,
            },
            768: {
                destroy: true,
                perPage: 2,
                arrows: false,
            },
            640: {
                destroy: true,
                arrows: false,
            },
            480: {
                perPage: 1,
                arrows: false,
            },
        }
    },
    'rtds-carousel--3-cols': {
        perPage: 3,
        type: 'loop',
        gap: '1.5rem',
        pagination: true,
        i18n: {
            prev: 'Precedente',
            next: 'Successivo',
            first: 'Vai al primo slide',
            last: 'Vai all\'ultimo slide',
            slideX: 'Vai allo slide %s',
            pageX: 'Vai alla pagina %s',
            slideLabel: '%s di %s',
            'slide %s': 'Slide %s',
            'Page %s': 'Pagina %s',
            select: 'Seleziona uno slide da visualizzare'
        },
        breakpoints: {
            1280: {
                perPage: 2,
            },
            1024: {
                perPage: 2,
            },
            768: {
                destroy: true,
                perPage: 2,
                arrows: false,
            },
            640: {
                destroy: true,
                arrows: false,
            },
            480: {
                perPage: 1,
                arrows: false,
            },
        }
    },
    'rtds-carousel--4-cols': {
        perPage: 4,
        type: 'loop',
        gap: '1.5rem',
        pagination: true,
        i18n: {
            prev: 'Precedente',
            next: 'Successivo',
            first: 'Vai al primo slide',
            last: 'Vai all\'ultimo slide',
            slideX: 'Vai allo slide %s',
            pageX: 'Vai alla pagina %s',
            slideLabel: '%s di %s',
            'slide %s': 'Slide %s',
            'Page %s': 'Pagina %s',
            select: 'Seleziona uno slide da visualizzare'
        },
        breakpoints: {
            1280: {
                perPage: 3,
            },
            1024: {
                perPage: 2,
            },
            768: {
                destroy: true,
                perPage: 2,
                arrows: false,
            },
            640: {
                destroy: true,
                arrows: false,
            },
            480: {
                perPage: 1,
                arrows: false,
            },
        }
    },
    'rtds-carousel--5-cols': {
        perPage: 5,
        type: 'loop',
        gap: '1.5rem',
        pagination: true,
        i18n: {
            prev: 'Precedente',
            next: 'Successivo',
            first: 'Vai al primo slide',
            last: 'Vai all\'ultimo slide',
            slideX: 'Vai allo slide %s',
            pageX: 'Vai alla pagina %s',
            slideLabel: '%s di %s',
            'slide %s': 'Slide %s',
            'Page %s': 'Pagina %s',
            select: 'Seleziona uno slide da visualizzare'
        },
        breakpoints: {
            1280: {
                perPage: 4,
            },
            1024: {
                perPage: 2,
            },
            768: {
                destroy: true,
                perPage: 2,
                arrows: false,
            },
            640: {
                destroy: true,
                arrows: false,
            },
            480: {
                perPage: 1,
                arrows: false,
            },
        }
    }
};

// Funzione per ottenere la configurazione corretta in base alle classi
function getCarouselConfig(element) {
    var classList = element.classList;
    
    // Controlla le classi specifiche
    for (var className in carouselConfigs) {
        if (classList.contains(className)) {
            return carouselConfigs[className];
        }
    }
    
    // Se non trova una configurazione specifica, usa quella di default
    return carouselConfigs.default;
}

window.addEventListener('load', function() {
    var carousels = document.getElementsByClassName('rtds-carousel');
    var splideInstances = [];

    // Inizializza tutti i carousel
    for (var i = 0; i < carousels.length; i++) {
        var config = getCarouselConfig(carousels[i]);
        var splide = new Splide(carousels[i], config);

        splideInstances.push(splide);
        splide.mount();
    }

    // Gestione dei tab solo se presenti nel DOM
    var tabButtons = document.querySelectorAll('.rtds-tab');
    if (tabButtons.length > 0) {
        tabButtons.forEach(function (button) {
            button.addEventListener('click', function () {
                // Aspetta che il tab sia visibile
                setTimeout(function () {
                    // Reinizializza tutti i carousel
                    splideInstances.forEach(function (splide) {
                        splide.refresh();
                    });
                }, 100);
            });
        });
    }
});
  • URL: /components/raw/carousel/carousel.js
  • Filesystem Path: components/04-organisms/carousel/carousel.js
  • Size: 5.7 KB

Componente Carousel

Implementazione di Splide.js per la creazione di carousel responsive e accessibili.

Comportamento

Il componente è renderizzato come una <section> contenente un <div class="rtds-carousel splide"> inizializzato dalla libreria Splide.js. Il carousel scorre orizzontalmente con loop infinito, navigazione tramite frecce e paginazione a punti, e supporta touch su dispositivi mobili.

Su breakpoint lg e superiori le frecce di navigazione sono visibili e posizionate esternamente. Su breakpoint inferiori, Splide.js può distruggere il carousel mostrando le slide in layout verticale; le frecce vengono nascoste e il pulsante “Vedi tutti” diventa visibile al posto di quello desktop (che ha classe rtds-hidden lg:rtds-inline-flex).

Varianti

Varianti di Colonne

  • carousel--3-cols: Carousel con 3 colonne visibili (classe rtds-carousel--3-cols)
  • carousel--4-cols: Carousel con 4 colonne visibili (classe rtds-carousel--4-cols)
  • carousel--5-cols: Carousel con 5 colonne visibili (classe rtds-carousel--5-cols)

Il numero esatto di colonne per breakpoint è determinato dalla configurazione JavaScript di Splide.

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria.

Parametri Base

  • classes (stringa, opzionale): Classe CSS aggiuntiva applicata al <div class="rtds-carousel splide">. Usata per le varianti di colonna (es. rtds-carousel--3-cols).

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.3.1 Informazioni e correlazioni — la sezione del carousel è identificata con aria-label e le slide sono in una <ul> semantica
  • 2.1.1 Tastiera — i pulsanti freccia e le slide sono raggiungibili da tastiera (gestiti da Splide.js)
  • 2.4.6 Intestazioni ed etichette — aria-label sul contenitore .splide descrive il carousel

Struttura e semantica

  • Il componente è renderizzato come <section> — identifica il blocco come regione autonoma della pagina
  • Il carousel è un <div class="rtds-carousel splide"> con aria-label — identifica il carousel per gli screen reader
  • I pulsanti freccia hanno aria-label esplicito (“Slide precedente”, “Slide successivo”) e testo rtds-sr-only ridondante

Attributi ARIA

Attributo Valori Condizione
aria-label su .splide es. "Titolo sezione" sempre presente — descrive il carousel
aria-label sui pulsanti freccia "Slide precedente" / "Slide successivo" sempre presente
Tasto Azione
Tab / Shift+Tab Sposta il focus tra i controlli del carousel
Arrow Left / Arrow Right Navigazione tra le slide (gestita da Splide.js)

Screen reader

  • Splide.js gestisce automaticamente role="group", aria-label per ogni slide e gli annunci di navigazione
  • Il testo rtds-sr-only sui pulsanti freccia è ridondante con aria-label — entrambi coesistono senza conflitti

Stili CSS

Classi Base

  • .rtds-carousel: Contenitore principale del carousel (wrapper Splide)
  • .rtds-carousel-wrapper: Wrapper della track di scorrimento (splide__track)
  • .rtds-carousel__list: Lista <ul> delle slide (splide__list)
  • .rtds-carousel-col: Singola colonna/slide (splide__slide)

Classi Modificatori

  • .rtds-carousel--3-cols: Variante a 3 colonne
  • .rtds-carousel--4-cols: Variante a 4 colonne
  • .rtds-carousel--5-cols: Variante a 5 colonne

Classi Elementi (BEM)

  • .rtds-carousel__arrows: Contenitore dei pulsanti freccia
  • .rtds-carousel__arrow: Stile base del pulsante freccia
  • .rtds-carousel__arrow--prev: Freccia precedente (posizionata a sinistra)
  • .rtds-carousel__arrow--next: Freccia successiva (posizionata a destra)
  • .rtds-carousel__arrow-svg: Icona SVG all’interno del pulsante freccia

Esempi di utilizzo

<!-- Carousel base (variante default) -->
<section class="rtds-py-6">
  <div class="rtds-container-sm">
    <div class="rtds-carousel splide" aria-label="Titolo sezione">
      <div class="rtds-carousel__arrows splide__arrows">
        <button class="rtds-carousel__arrow rtds-carousel__arrow--prev splide__arrow splide__arrow--prev" aria-label="Slide precedente">
          <!-- icona -->
          <span class="rtds-sr-only">Slide precedente</span>
        </button>
        <button class="rtds-carousel__arrow rtds-carousel__arrow--next splide__arrow splide__arrow--next" aria-label="Slide successivo">
          <!-- icona -->
          <span class="rtds-sr-only">Slide successivo</span>
        </button>
      </div>
      <div class="rtds-carousel-wrapper splide__track">
        <ul class="rtds-carousel__list splide__list">
          <li class="rtds-carousel-col splide__slide">
            <!-- contenuto della slide -->
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

<!-- Variante 3 colonne -->
<div class="rtds-carousel splide rtds-carousel--3-cols" aria-label="Titolo sezione">
  <!-- stessa struttura interna -->
</div>

Note

  • Richiede la libreria Splide.js: splide.min.css e splide.min.js devono essere caricati in pagina
  • Su dispositivi mobili (breakpoint md e inferiori) Splide può distruggere il carousel; le frecce vengono nascoste automaticamente
  • Il pulsante “Vedi tutti” desktop ha classe rtds-hidden lg:rtds-inline-flex; quello mobile è visibile solo sotto lg tramite lg:rtds-hidden
  • Le classi modificatore di colonna (es. rtds-carousel--3-cols) devono essere abbinate alla configurazione perPage in JavaScript per ottenere l’allineamento visivo corretto

Dipendenze