Regione Toscana Design System

Carousel: Default 

<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" 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>
 
/* No context defined. */
  • 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 */ 

var carousels = document.getElementsByClassName('rtds-carousel');
var splideInstances = [];

// 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;
}

// 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.5 KB

Componente Carousel

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

Documentazione

Vedi documentazione Splide.js

Dipendenze

File della libreria:

Comportamento

Il componente carousel implementa un sistema di navigazione a scorrimento orizzontale con le seguenti caratteristiche:

  • Responsive: si adatta a diverse dimensioni dello schermo
  • Loop infinito
  • Navigazione tramite frecce e paginazione
  • Accessibilità garantita tramite attributi ARIA e navigazione da tastiera
  • Supporto per touch su dispositivi mobili

Markup

Il componente utilizza la seguente struttura HTML:

<section class="rtds-py-6">
    <div class="rtds-container-sm">
        <!-- Header con titolo e pulsante -->
        <div class="rtds-wrapper-title">
            <h2 class="rtds-heading-2">Titolo sezione</h2>
            <button class="rtds-hidden lg:rtds-inline-flex">Vedi tutti i ...</button>
        </div>

        <!-- Carousel principale -->
        <div class="rtds-carousel splide" aria-label="Titolo sezione">
            <!-- Frecce di navigazione -->
            <div class="rtds-carousel__arrows">
                <button class="rtds-carousel__arrow rtds-carousel__arrow--prev">
                    <span class="rtds-sr-only">Precedente</span>
                </button>
                <button class="rtds-carousel__arrow rtds-carousel__arrow--next">
                    <span class="rtds-sr-only">Successiva</span>
                </button>
            </div>

            <!-- Lista degli elementi -->
            <div class="rtds-carousel-wrapper">
                <ul class="rtds-carousel__list">
                    <li class="rtds-carousel-col">
                        <!-- Contenuto della slide -->
                    </li>
                </ul>
            </div>
        </div>

        <!-- Pulsante mobile -->
        <div class="rtds-flex rtds-py-8 rtds-justify-center lg:rtds-hidden">
            <button>Vedi tutti i ...</button>
        </div>
    </div>
</section>

Configurazione

Il componente è configurato tramite JavaScript con le seguenti opzioni:

{
    perPage: 5,           // Numero di slide visibili
    type: 'loop',         // Modalità loop infinito
    gap: '1.5rem',        // Spazio tra le slide
    breakpoints: {
        1280: { perPage: 4 },
        1024: { perPage: 2 },
        768: { 
            destroy: true,
            perPage: 2,
            arrows: false
        },
        640: {
            destroy: true,
            arrows: false
        },
        480: {
            perPage: 1,
            arrows: false
        }
    }
}

Stili

Il componente utilizza classi Tailwind CSS e classi custom. Le principali classi includono:

  • .rtds-carousel: Contenitore principale
  • .rtds-carousel__arrows: Contenitore delle frecce di navigazione
  • .rtds-carousel__list: Lista delle slide
  • .rtds-carousel-col: Colonna/slide individuale

Note

  • Il componente è completamente responsive e si adatta automaticamente a diverse dimensioni dello schermo
  • Su dispositivi mobili, le frecce di navigazione vengono nascoste per una migliore esperienza utente
  • Il pulsante “Vedi tutti” è visibile solo su mobile
  • Il componente supporta l’accessibilità tramite attributi ARIA e navigazione da tastiera

Risorse