<div class="rtds-min-w-0">
<section id="mainSlider" class="rtds-slider splide rtds-slider--homepage" aria-labelledby="mainSliderLabel">
<h2 id="mainSliderLabel" class="rtds-sr-only">Slider contenuti in evidenza</h2>
<div class="rtds-slider__arrows splide__arrows">
<button class="rtds-slider__arrow rtds-slider__arrow--prev splide__arrow splide__arrow--prev">
<svg class="rtds-icon rtds-fill-current rtds-slider__arrow-svg" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--chevron-right" />
</svg>
<span class="rtds-sr-only">Precedente</span>
</button>
<button class="rtds-slider__arrow rtds-slider__arrow--next splide__arrow splide__arrow--next">
<svg class="rtds-icon rtds-fill-current rtds-slider__arrow-svg" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--chevron-right" />
</svg>
<span class="rtds-sr-only">Successiva</span>
</button>
</div>
<div class="rtds-slider__track splide__track">
<ul class="rtds-slider__list splide__list">
<li class="rtds-slider__slide splide__slide rtds-slide is-fullclickable rtds-group/slide" data-slide-title="Celebrazioni dei 450 anni della morte di Cosimo I dei MedicVasari">
<div class="rtds-slide__slide-wrapper rtds-h-full rtds-overflow-hidden rtds-flex rtds-flex-col md:rtds-flex-row">
<div class="rtds-slide_image">
<picture>
<source srcset="../../images/slider-ex.jpg">
<img src="../../images/slider-ex.jpg" alt="" />
</picture>
</div>
<div class="rtds-slide__content-wrapper rtds-flex-1 rtds-z-10 rtds-grid rtds-items-stretch">
<div class="rtds-slide__content
rtds-grid rtds-justify-items-start
rtds-gap-6 rtds-bg-white
">
<div class="rtds-grid rtds-gap-4 lg:rtds-gap-6 2xl:rtds-gap-8 rtds-self-start">
<h3 class="rtds-slide__title">
<a href="#" class="rtds-slide__link">
Celebrazioni dei 450 anni della morte di Cosimo I dei MedicVasari
</a>
</h3>
<div class="rtds-slide__excerpt">
<p>Celebrazioni dei 450 anni della morte di Cosimo I dei MedicVasari anni della morte di Cosimo I dei MedicVasaric anni della morte di Cosimo I</p>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="rtds-slider__slide splide__slide rtds-slide is-fullclickable rtds-group/slide" data-slide-title="Tirocini non curriculari in Toscana">
<div class="rtds-slide__slide-wrapper rtds-h-full rtds-overflow-hidden rtds-flex rtds-flex-col md:rtds-flex-row">
<div class="rtds-slide_image">
<picture>
<source srcset="../../images/slider-ex.jpg">
<img src="../../images/slider-ex.jpg" alt="" />
</picture>
</div>
<div class="rtds-slide__content-wrapper rtds-flex-1 rtds-z-10 rtds-grid rtds-items-stretch">
<div class="rtds-slide__content
rtds-grid rtds-justify-items-start
rtds-gap-6 rtds-bg-white
">
<div class="rtds-grid rtds-gap-4 lg:rtds-gap-6 2xl:rtds-gap-8 rtds-self-start">
<h3 class="rtds-slide__title">
<a href="#" class="rtds-slide__link">
Tirocini non curriculari in Toscana
</a>
</h3>
<div class="rtds-slide__excerpt">
<p>La Regione aumenta il rimborso minimo per tirocinante da 500 a 600 euro mensili.</p>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="rtds-slider__slide splide__slide rtds-slide is-fullclickable rtds-group/slide" data-slide-title="Dì di sì">
<div class="rtds-slide__slide-wrapper rtds-h-full rtds-overflow-hidden rtds-flex rtds-flex-col md:rtds-flex-row">
<div class="rtds-slide_image">
<picture>
<source srcset="../../images/slider-test.jpg">
<img src="../../images/slider-test.jpg" alt="" />
</picture>
</div>
<div class="rtds-slide__content-wrapper rtds-flex-1 rtds-z-10 rtds-grid rtds-items-stretch">
<div class="rtds-slide__content
rtds-grid rtds-justify-items-start
rtds-gap-6 rtds-bg-white
">
<div class="rtds-grid rtds-gap-4 lg:rtds-gap-6 2xl:rtds-gap-8 rtds-self-start">
<h3 class="rtds-slide__title">
<a href="#" class="rtds-slide__link">
Dì di sì
</a>
</h3>
<div class="rtds-slide__excerpt">
<p>Regione Toscana e ISPRO offrono screening oncologici gratuiti e semplici, per individuare precocemente tumori o alterazioni sospette. Chi riceve la lettera d’invito deve solo <strong>dire “sì” e presentarsi all’appuntamento: non serve la ricetta.</strong></p>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="rtds-slider__slide splide__slide rtds-slide is-fullclickable rtds-group/slide" data-slide-title="Giovanisì, il Next Generation Fest il 2 giugno celebra la Repubblica">
<div class="rtds-slide__slide-wrapper rtds-h-full rtds-overflow-hidden rtds-flex rtds-flex-col md:rtds-flex-row">
<div class="rtds-slide_image">
<picture>
<source srcset="../../images/slider-test.jpg">
<img src="../../images/slider-test.jpg" alt="" />
</picture>
</div>
<div class="rtds-slide__content-wrapper rtds-flex-1 rtds-z-10 rtds-grid rtds-justify-items-end ">
<div class="rtds-slide__content
rtds-grid rtds-justify-items-end
rtds-gap-6 rtds-bg-white
">
<div class="rtds-grid rtds-gap-4 lg:rtds-gap-6 2xl:rtds-gap-8 rtds-self-start">
<h3 class="rtds-slide__title">
<a href="#" class="rtds-slide__link">
Giovanisì, il Next Generation Fest il 2 giugno celebra la Repubblica
</a>
</h3>
<div class="rtds-slide__excerpt">
<p>Giovanisì, il Next Generation Fest il 2 giugno celebra la Repubblica</p>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="rtds-slider__slide splide__slide rtds-slide is-fullclickable rtds-group/slide" data-slide-title="Cresci un cucciolo, preparalo a cambiare una vita">
<div class="rtds-slide__slide-wrapper rtds-h-full rtds-overflow-hidden rtds-flex rtds-flex-col md:rtds-flex-row">
<div class="rtds-slide_image">
<picture>
<source srcset="../../images/slider-test.jpg">
<img src="../../images/slider-test.jpg" alt="" />
</picture>
</div>
<div class="rtds-slide__content-wrapper rtds-flex-1 rtds-z-10 rtds-grid rtds-justify-items-end ">
<div class="rtds-slide__content
rtds-grid rtds-justify-items-end
rtds-gap-6 rtds-bg-white
">
<div class="rtds-grid rtds-gap-4 lg:rtds-gap-6 2xl:rtds-gap-8 rtds-self-start">
<h3 class="rtds-slide__title">
<a href="#" class="rtds-slide__link">
Cresci un cucciolo, preparalo a cambiare una vita
</a>
</h3>
<div class="rtds-slide__excerpt">
<p>La Scuola nazionale cani guida per ciechi della Regione Toscana <strong>affida cuccioli a famiglie volontarie per i primi 18 mesi</strong>, aiutandoli a crescere e socializzare.</p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<ul id="rtSliderPagination" class="rtds-slider__pagination splide__pagination"></ul>
</section>
</div>
<div class="rtds-min-w-0">
<section
id="mainSlider"
class="rtds-slider splide{% block classes %} rtds-slider--homepage{% if classes %} {{ classes }}{% endif %}{% endblock %}"
aria-labelledby="mainSliderLabel"
{% if decorationImage %} style="--slider-decoration-image: url('{{ decorationImage | path }}');"{% endif %}
>
<h2 id="mainSliderLabel" class="rtds-sr-only">{{ label }}</h2>
{# Arrows #}
<div class="rtds-slider__arrows splide__arrows">
<button
class="rtds-slider__arrow rtds-slider__arrow--prev splide__arrow splide__arrow--prev"
>
{% render '@icon', {id: 'solid--chevron-right', classes:
'rtds-slider__arrow-svg', size: ''}, true %}
<span class="rtds-sr-only">Precedente</span>
</button>
<button
class="rtds-slider__arrow rtds-slider__arrow--next splide__arrow splide__arrow--next"
>
{% render '@icon', {id: 'solid--chevron-right', classes:
'rtds-slider__arrow-svg', size: ''}, true %}
<span class="rtds-sr-only">Successiva</span>
</button>
</div>
<div class="rtds-slider__track splide__track">
<ul class="rtds-slider__list splide__list">
{% for slide in slides %}
<li class="rtds-slider__slide splide__slide rtds-slide is-fullclickable rtds-group/slide" data-slide-title="{{ slide.title }}">
<div
class="rtds-slide__slide-wrapper rtds-h-full rtds-overflow-hidden rtds-flex rtds-flex-col md:rtds-flex-row"
>
<div class="rtds-slide_image">
<picture>
<source srcset="{{ slide.imgPath | path }}">
<img
src="{{ slide.imgPath | path }}"
alt="{% if slide.imgAlt %}{{ slide.imgAlt }}{% else %}{% endif %}"
/>
</picture>
</div>
<div
class="rtds-slide__content-wrapper rtds-flex-1 rtds-z-10 rtds-grid{% if slide.centered %} rtds-place-content-center rtds-justify-items-center{% elseif slide.rightAligned %} rtds-justify-items-end {% elseif slide.stretchAligned %} rtds-items-stretch{% else %} rtds-justify-start{% endif %}{% if slide.topAligned %} rtds-items-start {% elseif slide.bottomAligned %} rtds-items-end {% elseif not slide.stretchAligned %} rtds-items-center {% endif %}{% if slidePadding %} {{ slidePadding }}{% endif %}{% if sliderBgColor %} {{ sliderBgColor }}{% endif %}{% if sliderBgOpacity %} {{ sliderBgOpacity }}{% endif %}"
>
<div
class="rtds-slide__content
{% block slideContentClasses %}
rtds-grid{% if slide.centered %} rtds-justify-items-center {% elseif slide.rightAligned %} rtds-justify-items-end{% else %} rtds-justify-items-start{% endif %}
{% if slide.contentWidth %} {{ slide.contentWidth }}{% endif %} rtds-gap-6{% if slide.contentBgColor %} {{ slide.contentBgColor }}{% endif %}{% if slide.contentBgOpacity %} {{ slide.contentBgOpacity }}{% endif %}{% if slide.contentTextColor %} {{ slide.contentTextColor }}{% endif %}
{% endblock slideContentClasses %}"
>
<div class="rtds-grid rtds-gap-4 lg:rtds-gap-6 2xl:rtds-gap-8 rtds-self-start">
<h3 class="rtds-slide__title">
<a href="#" class="rtds-slide__link">
{{ slide.title | safe }}
</a>
</h3>
{% if slide.excerpt %}
<div class="rtds-slide__excerpt">
<p>{{ slide.excerpt | safe }}</p>
</div>
{% endif %}
</div>
{# <div class="rtds-slide__cta-wrapper{% block slideCtaWrapperClasses %} rtds-mt-auto rtds-justify-self-end{% endblock %}">
{% if slide.button.buttonIcon %}
{% render '@button--icon', {span: "true",classes: 'rtds-slide__cta rtds-btn--outlined', label: '', icon: 'mini--arrow-right'}, true %}
{% else %}
{% render '@button', {span: "true",classes: 'rtds-slide__cta', label:''}, true
%}
{% endif %}
</div>#}
</div>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
<ul id="rtSliderPagination" class="rtds-slider__pagination splide__pagination"></ul>
</section>
</div>
{
"label": "Slider contenuti in evidenza",
"minHeight": "40rem",
"height": "66vh",
"maxHeight": "1000px",
"slides": [
{
"title": "Centered slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus",
"ctaLabel": "Scopri di più",
"imgPath": "/images/slider-ex.jpg",
"centered": true,
"contentBgColor": "rtds-bg-white",
"contentWidth": "rtds-w-full md:rtds-w-9/12 lg:rtds-w-7/12"
},
{
"title": "Centered slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus",
"ctaLabel": "Scopri di più",
"imgPath": "/images/feathers.jpg",
"centered": true,
"contentBgColor": "rtds-bg-white",
"contentWidth": "rtds-w-full md:rtds-w-9/12 lg:rtds-w-7/12"
}
]
}
/**
* SLIDER
*
*/
.rtds-slider {
min-width: var(--spacing-0);
}
/*.rtds-slide:where(:not(.is-active.is-visible)) {
@apply xl:rtds-opacity-0 xl:rtds-pointer-events-none;
}*/
.rtds-slide__title {
font-size: var(--fontsize-text-2xl);
line-height: 1.1;
font-weight: 700;
}
@media (min-width: 1024px) {
.rtds-slide__title {
font-size: 2rem;
line-height: 1.1;
}
}
@media (min-width: 1280px) {
.rtds-slide__title {
font-size: var(--fontsize-text-4xl);
line-height: 1.1;
}
}
@media (min-width: 1440px) {
.rtds-slide__title {
font-size: var(--fontsize-text-5xl);
}
}
@media (min-width: 1536px) {
.rtds-slide__title {
line-height: 1.1;
}
}
.rtds-slide__link {
display: inline-block;
}
.rtds-slide__link:hover {
text-decoration-line: underline;
}
.rtds-group\/slide:hover .rtds-slide__link {
text-decoration-line: underline;
}
.rtds-slide__excerpt {
font-size: var(--fontsize-text-base);
line-height: 1.625;
}
@media (min-width: 1280px) {
.rtds-slide__excerpt {
font-size: var(--fontsize-text-lg);
line-height: 1.625;
}
}
@media (min-width: 1440px) {
.rtds-slide__excerpt {
font-size: var(--fontsize-text-xl);
line-height: 1.625;
}
}
.rtds-slide__excerpt p {
color: inherit;
}
/* Slider buttons arrows - next/prev */
.rtds-slider__arrow {
top: var(--spacing-0);
bottom: var(--spacing-0);
height: auto;
width: var(--spacing-8);
--tw-translate-y: var(--spacing-0);
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
border-radius: 0.125rem;
opacity: 1;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
background-color: var(--color-background-06);
display: flex;
justify-content: center;
align-items: center;
}
.rtds-slider__arrow:hover {
opacity: 1;
background-color: var(--color-background-07);
}
@media (min-width: 768px) {
.rtds-slider__arrow {
width: var(--spacing-16);
}
}
@media (min-width: 1024px) {
.rtds-slider__arrow {
width: var(--spacing-20);
}
}
.rtds-slider__arrow:hover:not(:disabled) {
opacity: 1;
background-color: var(--color-background-07);
}
.rtds-slider__arrow svg {
width: var(--spacing-5);
height: var(--spacing-5);
}
@media (min-width: 768px) {
.rtds-slider__arrow svg {
height: var(--spacing-10);
width: var(--spacing-10);
}
}
@media (min-width: 1024px) {
.rtds-slider__arrow svg {
height: var(--spacing-12);
width: var(--spacing-12);
}
}
.rtds-slider__arrow--prev, .rtds-slider__arrow--next {
z-index: 20;
}
.rtds-slider__arrow--prev {
left: var(--spacing-0);
}
.rtds-slider__arrow--next {
right: var(--spacing-0);
}
.rtds-slider__arrow .rtds-slider__arrow-svg {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* SLIDE */
.rtds-slide_image {
--width-slide-img: 100%;
--width-slide-img-tablet: 50%;
--width-slide-img-desktop: 60%;
--width-slide-img-wide-desktop: 66.666667%;
height: auto;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.rtds-group\/slide:hover .rtds-slide_image {
opacity: 0.85;
}
@media (min-width: 768px) {
.rtds-slide_image {
width: var(--width-slide-img-tablet);
}
}
@media (min-width: 1280px) {
.rtds-slide_image {
width: var(--width-slide-img-desktop);
}
}
@media (min-width: 1536px) {
.rtds-slide_image {
width: var(--width-slide-img-wide-desktop);
}
}
.rtds-slide_image img {
aspect-ratio: 16 / 9;
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
/* SLIDER HOMEPAGE */
.rtds-slider--homepage {
/* Used in slider.js for dinamic padding */
--slider-padding: var(--spacing-20);
--slider-padding-desktop: var(--spacing-0);
--slider-padding-tablet: var(--spacing-0);
--slider-padding-mobile: var(--spacing-0);
--pagination-height: calc(var(--pagination-height-temp) * 1rem / 16);
border-bottom-width: 1px;
border-color: var(--color-border-gray-03);
}
@media (min-width: 768px) {
.rtds-slider--homepage .rtds-slide_image {
left: var(--spacing-0);
right: var(--spacing-0);
}
}
.rtds-slider--homepage .rtds-slider__arrow {
/* Uses custom properties defined in slider and used in slider.js */
bottom: var(--pagination-height);
width: var(--slider-padding-mobile);
}
@media (min-width: 360px) {
.rtds-slider--homepage .rtds-slider__arrow {
width: var(--slider-padding-tablet);
}
}
@media (min-width: 768px) {
.rtds-slider--homepage .rtds-slider__arrow {
width: var(--slider-padding-desktop);
}
}
@media (min-width: 1024px) {
.rtds-slider--homepage .rtds-slider__arrow {
width: var(--slider-padding);
}
}
/* Stile base della slide */
.rtds-slider__slide {
position: relative;
background-color: var(--color-background-05);
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.rtds-slide__content-wrapper {
opacity: 1;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
box-shadow: rgba(100, 100, 111, 0.4) 0px 7px 29px 0px;
}
.rtds-slide__content {
padding: var(--spacing-5);
}
@media (min-width: 768px) {
.rtds-slide__content {
padding: var(--spacing-6);
}
}
@media (min-width: 1024px) {
.rtds-slide__content {
padding-left: var(--spacing-8);
padding-right: var(--spacing-8);
}
}
@media (min-width: 1280px) {
.rtds-slide__content {
padding-top: var(--spacing-8);
padding-bottom: var(--spacing-8);
}
}
@media (min-width: 1440px) {
.rtds-slide__content {
padding-top: var(--spacing-12);
padding-bottom: var(--spacing-12);
}
}
@media (min-width: 1536px) {
.rtds-slide__content {
padding-top: var(--spacing-16);
padding-bottom: var(--spacing-16);
}
}
/*.rtds-slide__cta {
@apply rtds-hidden lg:rtds-flex lg:rtds-absolute lg:rtds-bottom-4 lg:rtds-right-4 rtds-opacity-0 rtds-invisible group-hover/slide:rtds-opacity-100 group-hover/slide:rtds-visible rtds-bg-white;
}*/
/*.rtds-slider--homepage .rtds-slide__content {
/*--_slider-decoration-image: var(--slider-decoration-image, url('/images/slider-decoration.svg'));
background-image: var(--_slider-decoration-image);
@apply rtds-pr-10 rtds-bg-no-repeat rtds-bg-right-bottom rtds-bg-auto md:rtds-bg-[size:4rem] lg:rtds-bg-[size:6rem];
}*/
/*.rtds-slider--homepage .rtds-slide__cta {
@apply -rtds-mr-8 md:-rtds-mr-4;
}*/
.rtds-slider__slide.is-prev .rtds-slide__content-wrapper,
.rtds-slider__slide.is-next .rtds-slide__content-wrapper {
pointer-events: none;
opacity: 0;
}
.rtds-slider__slide.is-moving .rtds-slide__content-wrapper,
.rtds-slider__slide.is-active .rtds-slide__content-wrapper,
.rtds-slider__slide.is-active .rtds-slide__slide-wrapper {
opacity: 1;
}
/* Pagination */
.rtds-slider__pagination {
overflow-x: auto;
border-top-width: 1px;
border-color: var(--color-border-gray-02);
display: flex;
gap: var(--spacing-2);
padding-left: var(--spacing-4);
padding-right: var(--spacing-4);
}
@media (min-width: 768px) {
.rtds-slider__pagination {
justify-content: center;
overflow-x: visible;
border-top-width: 2px;
border-color: var(--color-secondary-500);
}
}
@media (min-width: 1024px) {
.rtds-slider__pagination {
justify-content: flex-start;
gap: var(--spacing-6);
padding-left: var(--spacing-0);
padding-right: var(--spacing-0);
}
}
.rtds-slider__pagination-item {
flex-grow: 1;
flex-basis: var(--spacing-12);
flex-direction: column;
padding-top: var(--spacing-2);
padding-bottom: var(--spacing-2);
display: flex;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
@media (min-width: 768px) {
.rtds-slider__pagination-item {
flex-grow: 0;
}
}
@media (min-width: 1024px) {
.rtds-slider__pagination-item {
max-width: 20%;
flex-shrink: 1;
flex-grow: 1;
flex-basis: 20%;
padding-left: var(--spacing-3);
padding-right: var(--spacing-3);
padding-top: var(--spacing-3);
padding-bottom: var(--spacing-1-5);
}
}
.rtds-slider__pagination-item.is-current-slide {
width: var(--spacing-8);
flex-grow: 0;
}
@media (min-width: 1024px) {
.rtds-slider__pagination-item.is-current-slide {
width: auto;
flex-grow: 1;
}
}
.rtds-slider__pagination-button {
position: relative;
align-items: flex-start;
padding-top: var(--spacing-2);
padding-bottom: var(--spacing-2);
text-align: left;
font-size: var(--fontsize-text-base);
color: var(--color-content-02);
display: flex;
line-height: 1.25;
font-weight: 700;
}
@media (min-width: 1024px) {
.rtds-slider__pagination-button {
height: 100%;
border-bottom-width: 4px;
border-bottom-color: transparent;
padding-top: var(--spacing-0);
}
}
/* Pagination button after decoration */
.rtds-slider__pagination-button:after {
width: 100%;
border-top-width: 4px;
border-style: solid;
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
background-color: var(--color-secondary-300);
--tw-content: '';
content: var(--tw-content);
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
height: var(--spacing-4);
}
@media (min-width: 1024px) {
.rtds-slider__pagination-button:after {
display: none;
}
.rtds-slider__pagination-button:hover {
border-bottom-color: currentColor;
color: var(--color-content-primary);
}
}
.rtds-slider__pagination-button:hover:after {
background-color: var(--color-secondary-700);
}
@media (min-width: 1024px) {
.rtds-slider__pagination-button:hover:after {
background-color: transparent;
}
}
.rtds-slider__pagination-button[aria-selected="true"] {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
color: var(--color-content-primary);
}
.rtds-slider__pagination-button[aria-selected="true"]::after {
border-color: var(--color-secondary-700);
content: var(--tw-content);
background-color: var(--color-secondary-700);
}
@media (min-width: 1024px) {
.rtds-slider__pagination-button[aria-selected="true"] {
border-bottom-color: currentColor;
}
}
.rtds-slider__pagination-button-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.rtds-article-body .rtds-slider__pagination-button-label + * {
margin-top: var(--spacing-0);
}
.rtds-slider__pagination-button-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
@media (min-width: 1024px) {
.rtds-slider__pagination-button-label {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
}
}
/**
* SLIDER
*
*/
@layer components {
.rtds-slider {
@apply rtds-min-w-0;
}
/*.rtds-slide:where(:not(.is-active.is-visible)) {
@apply xl:rtds-opacity-0 xl:rtds-pointer-events-none;
}*/
.rtds-slide__title {
@apply rtds-text-2xl lg:rtds-text-3xl xl:rtds-text-4xl 1.5xl:rtds-text-5xl rtds-font-bold rtds-leading-[1.1] lg:rtds-leading-[1.1] xl:rtds-leading-[1.1] 2xl:rtds-leading-[1.1];
}
.rtds-slide__link {
@apply rtds-inline-block hover:rtds-underline group-hover/slide:rtds-underline;
}
.rtds-slide__excerpt {
@apply rtds-text-base xl:rtds-text-lg 1.5xl:rtds-text-xl rtds-leading-relaxed xl:rtds-leading-relaxed 1.5xl:rtds-leading-relaxed;
}
.rtds-slide__excerpt p {
@apply rtds-text-[inherit];
}
/* Slider buttons arrows - next/prev */
.rtds-slider__arrow {
@apply rtds-flex rtds-items-center rtds-justify-center rtds-rounded-sm rtds-w-8 rtds-h-auto md:rtds-w-16 lg:rtds-w-20 rtds-background-06 rtds-opacity-100 hover:rtds-background-07 hover:rtds-opacity-100 rtds-top-0 rtds-bottom-0 rtds-transition rtds-translate-y-0;
}
.rtds-slider__arrow:hover:not(:disabled) {
@apply rtds-background-07 rtds-opacity-100;
}
.rtds-slider__arrow svg {
@apply rtds-w-5 rtds-h-5 md:rtds-w-10 md:rtds-h-10 lg:rtds-w-12 lg:rtds-h-12;
}
.rtds-slider__arrow--prev, .rtds-slider__arrow--next {
@apply rtds-z-20;
}
.rtds-slider__arrow--prev {
@apply rtds-left-0;
}
.rtds-slider__arrow--next {
@apply rtds-right-0;
}
.rtds-slider__arrow .rtds-slider__arrow-svg {
@apply rtds-text-white;
}
/* SLIDE */
.rtds-slide_image {
--width-slide-img: 100%;
--width-slide-img-tablet: theme('width.[6/12]');
--width-slide-img-desktop: 60%;
--width-slide-img-wide-desktop: theme('width.[8/12]');
@apply rtds-w-full rtds-h-auto md:rtds-w-[--width-slide-img-tablet] xl:rtds-w-[--width-slide-img-desktop] 2xl:rtds-w-[--width-slide-img-wide-desktop] rtds-object-cover rtds-object-center rtds-transition-all rtds-duration-300 rtds-ease-in-out group-hover/slide:rtds-opacity-85;
}
.rtds-slide_image img {
@apply rtds-aspect-video rtds-w-full rtds-h-full rtds-object-cover rtds-object-center;
}
/* SLIDER HOMEPAGE */
.rtds-slider--homepage {
/* Used in slider.js for dinamic padding */
--slider-padding: theme('spacing.20');
--slider-padding-desktop: theme('spacing.0');
--slider-padding-tablet: theme('spacing.0');
--slider-padding-mobile: theme('spacing.0');
--pagination-height: calc(var(--pagination-height-temp) * 1rem / 16);
@apply rtds-border-b rtds-border-gray-03;
}
.rtds-slider--homepage .rtds-slide_image {
@apply md:rtds-left-0 md:rtds-right-0;
}
.rtds-slider--homepage .rtds-slider__arrow {
/* Uses custom properties defined in slider and used in slider.js */
@apply rtds-w-[--slider-padding-mobile] xs:rtds-w-[--slider-padding-tablet] md:rtds-w-[--slider-padding-desktop] lg:rtds-w-[--slider-padding] rtds-bottom-[--pagination-height];
}
/* Stile base della slide */
.rtds-slider__slide {
@apply rtds-transition-all rtds-duration-300 rtds-ease-in-out rtds-relative rtds-background-05;
}
.rtds-slide__content-wrapper {
@apply rtds-transition-all rtds-duration-300 rtds-ease-in-out rtds-opacity-100;
box-shadow: rgba(100, 100, 111, 0.4) 0px 7px 29px 0px;
}
.rtds-slide__content {
@apply rtds-p-5 md:rtds-p-6 lg:rtds-px-8 xl:rtds-py-8 1.5xl:rtds-py-12 2xl:rtds-py-16;
}
/*.rtds-slide__cta {
@apply rtds-hidden lg:rtds-flex lg:rtds-absolute lg:rtds-bottom-4 lg:rtds-right-4 rtds-opacity-0 rtds-invisible group-hover/slide:rtds-opacity-100 group-hover/slide:rtds-visible rtds-bg-white;
}*/
/*.rtds-slider--homepage .rtds-slide__content {
/*--_slider-decoration-image: var(--slider-decoration-image, url('/images/slider-decoration.svg'));
background-image: var(--_slider-decoration-image);
@apply rtds-pr-10 rtds-bg-no-repeat rtds-bg-right-bottom rtds-bg-auto md:rtds-bg-[size:4rem] lg:rtds-bg-[size:6rem];
}*/
/*.rtds-slider--homepage .rtds-slide__cta {
@apply -rtds-mr-8 md:-rtds-mr-4;
}*/
.rtds-slider__slide.is-prev .rtds-slide__content-wrapper,
.rtds-slider__slide.is-next .rtds-slide__content-wrapper {
@apply rtds-opacity-0 rtds-pointer-events-none;
}
.rtds-slider__slide.is-moving .rtds-slide__content-wrapper,
.rtds-slider__slide.is-active .rtds-slide__content-wrapper,
.rtds-slider__slide.is-active .rtds-slide__slide-wrapper {
@apply rtds-opacity-100;
}
/* Pagination */
.rtds-slider__pagination {
@apply rtds-flex md:rtds-justify-center lg:rtds-justify-start rtds-gap-2 rtds-px-4 lg:rtds-px-0 lg:rtds-gap-6 rtds-overflow-x-auto md:rtds-overflow-x-visible rtds-border-t rtds-border-gray-02 md:rtds-border-t-2 md:rtds-border-secondary-500;
}
.rtds-slider__pagination-item {
@apply rtds-flex rtds-flex-col rtds-py-2 lg:rtds-pt-3 lg:rtds-px-3 lg:rtds-pb-1.5 rtds-flex-grow rtds-basis-12 md:rtds-flex-grow-0 lg:rtds-flex-grow lg:rtds-flex-shrink lg:rtds-max-w-[20%] lg:rtds-basis-[20%] rtds-transition-all rtds-duration-300 rtds-ease-in-out;
}
.rtds-slider__pagination-item.is-current-slide {
@apply rtds-flex-grow-0 rtds-w-8 lg:rtds-w-auto lg:rtds-flex-grow;
}
.rtds-slider__pagination-button {
@apply rtds-relative rtds-flex rtds-items-start rtds-py-2 rtds-text-left rtds-text-base rtds-font-bold rtds-leading-tight rtds-content-02 lg:rtds-pt-0 lg:rtds-h-full lg:rtds-border-b-4 lg:rtds-border-b-transparent;
}
/* Pagination button after decoration */
.rtds-slider__pagination-button:after {
@apply rtds-content-[''] rtds-border-solid rtds-border-t-4 rtds-border-white rtds-transition-all rtds-duration-300 rtds-ease-in-out rtds-w-full rtds-h-4 rtds-bg-secondary-300 lg:rtds-hidden;
}
.rtds-slider__pagination-button:hover {
@apply lg:rtds-content-primary lg:rtds-border-b-current;
}
.rtds-slider__pagination-button:hover:after {
@apply rtds-bg-secondary-700 lg:rtds-bg-transparent;
}
.rtds-slider__pagination-button[aria-selected="true"] {
@apply rtds-bg-white lg:rtds-border-b-current rtds-content-primary after:rtds-bg-secondary-700 after:rtds-border-secondary-700;
}
.rtds-slider__pagination-button-label {
@apply rtds-sr-only lg:rtds-not-sr-only;
}
}
/* MAIN SLIDER SCRIPT
* SPLIDE.JS CUSTOMIZATIONS
*/
function clickableSlide(cards, linkSelector = '.rtds-card__title a') {
Array.prototype.forEach.call(cards, card => {
let down, up;
const link = card.querySelector(linkSelector);
if (!link) return; // Skip se non trova il link
card.style.cursor = 'pointer';
card.onmousedown = (e) => {
// Verifica se è il tasto sinistro (0)
if (e.button === 0) {
down = +new Date();
}
}
card.onmouseup = (e) => {
// Procedi solo se è il tasto sinistro (0)
if (e.button === 0) {
up = +new Date();
if ((up - down) < 200) {
link.click();
}
}
}
});
}
// Funzione per inizializzare lo slider
function initSlider() {
// Verifica l'esistenza dell'elemento #mainSlider
const mainSlider = document.getElementById('mainSlider');
if (!mainSlider) return; // Se non esiste, interrompi l'esecuzione
// Funzione per ottenere il valore della custom property dallo slider con classe rtds-slider--homepage
function getCSSCustomProp(propName) {
const sliderElement = document.querySelector('.rtds-slider--homepage');
return getComputedStyle(sliderElement)
.getPropertyValue(propName)
.trim();
}
// Funzione per calcolare e impostare l'altezza della paginazione
function setPaginationHeight() {
const sliderElement = document.querySelector('.rtds-slider--homepage');
const paginationElement = document.getElementById('rtSliderPagination');
if (paginationElement) {
const paginationHeight = paginationElement.offsetHeight;
// Rimuoviamo 'px' e passiamo solo il numero
sliderElement.style.setProperty('--pagination-height-temp', paginationHeight);
}
}
var splide = new Splide('#mainSlider', {
type: 'loop',
pagination: false,
perPage: 1,
padding: {
left: getCSSCustomProp('--slider-padding'),
right: getCSSCustomProp('--slider-padding')
},
trimSpace: false,
speed: 300,
easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
waitForTransition: true,
drag: false,
focus: 'center',
breakpoints: {
1279: {
type: 'slide',
arrows: false,
padding: {
left: getCSSCustomProp('--slider-padding-desktop'),
right: getCSSCustomProp('--slider-padding-desktop')
}
},
767: {
padding: {
left: getCSSCustomProp('--slider-padding-tablet'),
right: getCSSCustomProp('--slider-padding-tablet')
}
},
576: {
padding: {
left: getCSSCustomProp('--slider-padding-mobile'),
right: getCSSCustomProp('--slider-padding-mobile')
}
}
}
});
// Aggiungiamo gli event listener per gestire la transizione
splide.on('move', function() {
const slides = document.querySelectorAll('.rtds-slider__slide');
slides.forEach(slide => {
slide.classList.add('is-moving');
});
});
splide.on('moved', function() {
// Rimuoviamo la classe dopo un breve delay per permettere la transizione
setTimeout(() => {
const slides = document.querySelectorAll('.rtds-slider__slide');
slides.forEach(slide => {
slide.classList.remove('is-moving');
});
}, 350); // Metà del tempo della transizione totale
});
splide.on('mounted updated refresh', function() {
const totalSlides = splide.length;
const allSlides = document.querySelectorAll('#mainSlider .splide__slide');
allSlides.forEach((slide, index) => {
// Calcoliamo l'indice reale basandoci sull'indice dell'array
const realIndex = (index % totalSlides) + 1;
slide.setAttribute('aria-label', `${realIndex} di ${totalSlides}`);
});
// Calcoliamo l'altezza dopo che lo slider è montato/aggiornato
setPaginationHeight();
});
// Aggiungiamo il listener per il resize della finestra
let resizeTimer;
window.addEventListener('resize', function() {
// Debounce per evitare troppe chiamate durante il resize
clearTimeout(resizeTimer);
resizeTimer = setTimeout(setPaginationHeight, 250);
});
var slides = document.querySelectorAll('#mainSlider .splide__slide');
var paginationContainer = document.getElementById('rtSliderPagination');
paginationContainer.classList.remove('splide__pagination');
paginationContainer.setAttribute('role', 'tablist');
paginationContainer.setAttribute('aria-label', 'Seleziona una slide');
slides.forEach(function(slide, index) {
var slideTitle = slide.getAttribute('data-slide-title');
var button = document.createElement('button');
button.className = 'rtds-slider__pagination-button';
button.setAttribute('type', 'button');
button.setAttribute('aria-label', 'Vai alla slide ' + slideTitle);
button.setAttribute('aria-controls', 'splide__slide' + (index + 1));
button.setAttribute('role', 'tab');
button.setAttribute('aria-selected', index === 0 ? 'true' : 'false');
button.setAttribute('tabindex', index === 0 ? '0' : '-1');
// Creazione dello span per wrappare il testo
var labelSpan = document.createElement('span');
labelSpan.className = 'rtds-slider__pagination-button-label';
labelSpan.textContent = slideTitle;
button.appendChild(labelSpan);
button.addEventListener('click', function() {
splide.go(index);
scrollPaginationButtonIntoView(this);
});
button.addEventListener('keydown', function(e) {
const buttons = paginationContainer.querySelectorAll('button');
let targetButton = null;
const currentIndex = Array.from(buttons).indexOf(button);
switch(e.key) {
case 'ArrowRight':
case 'ArrowDown':
e.preventDefault();
targetButton = buttons[currentIndex + 1] || buttons[0];
break;
case 'ArrowLeft':
case 'ArrowUp':
e.preventDefault();
targetButton = buttons[currentIndex - 1] || buttons[buttons.length - 1];
break;
case 'Home':
e.preventDefault();
targetButton = buttons[0];
break;
case 'End':
e.preventDefault();
targetButton = buttons[buttons.length - 1];
break;
case 'Enter':
case ' ':
e.preventDefault();
scrollPaginationButtonIntoView(this);
break;
}
if (targetButton) {
buttons.forEach(btn => btn.setAttribute('tabindex', '-1'));
targetButton.setAttribute('tabindex', '0');
targetButton.focus();
splide.go(Array.from(buttons).indexOf(targetButton));
scrollPaginationButtonIntoView(targetButton);
}
});
var li = document.createElement('li');
li.setAttribute('role', 'presentation');
li.className = 'rtds-slider__pagination-item';
li.appendChild(button);
paginationContainer.appendChild(li);
});
splide.on('moved', function(newIndex) {
// Logging per debug
console.log('Slide moved to index:', newIndex);
// Selezioniamo direttamente gli elementi li
const paginationItems = document.querySelectorAll('.rtds-slider__pagination-item');
const paginationButtons = paginationContainer.querySelectorAll('.rtds-slider__pagination-button');
// Rimuoviamo la classe da tutti gli elementi
paginationItems.forEach(item => item.classList.remove('is-current-slide'));
// Aggiungiamo la classe solo all'elemento corrente
if (paginationItems[newIndex]) {
paginationItems[newIndex].classList.add('is-current-slide');
}
// Gestiamo i button come prima
paginationButtons.forEach(function(button, index) {
button.setAttribute('aria-selected', index === newIndex ? 'true' : 'false');
button.classList.toggle('is-active', index === newIndex);
button.setAttribute('tabindex', index === newIndex ? '0' : '-1');
});
});
// Aggiungiamo la gestione anche all'evento mounted
splide.on('mounted', function() {
const paginationItems = document.querySelectorAll('.rtds-slider__pagination-item');
const currentIndex = splide.index;
paginationItems.forEach((item, index) => {
item.classList.toggle('is-current-slide', index === currentIndex);
});
});
splide.mount();
// Aggiungi questa funzione dopo la dichiarazione di splide
function scrollPaginationButtonIntoView(button) {
if (window.innerWidth <= 1023) {
button.parentElement.scrollIntoView({
behavior: 'smooth',
block: 'nearest',
inline: 'center'
});
}
}
}
window.addEventListener('load', function() {
// Inizializza le slide cliccabili
const fullClickableSlides = document.querySelectorAll('.rtds-slide.is-fullclickable');
const linkSelector = '.rtds-slide__link';
clickableSlide(fullClickableSlides, linkSelector);
// Inizializza slider
initSlider();
});
Istance of Splide.js
Library files:
splide.min.css See resourcesplide.min.js See resourceLivello AA — criteri pertinenti:
imgAlt per l’immagine; usare stringa vuota se decorativaaria-labelledby collegato all’<h2> nascosto<section id="mainSlider" class="rtds-slider splide" aria-labelledby="mainSliderLabel"><h2 id="mainSliderLabel" class="rtds-sr-only"> contiene il valore di label — etichetta nascosta per lo slider<span class="rtds-sr-only"> con testo “Precedente” / “Successiva”| Attributo | Valori | Condizione |
|---|---|---|
aria-labelledby su <section> |
"mainSliderLabel" |
sempre presente |
alt su <img> nelle slide |
stringa descrittiva o "" |
tramite parametro imgAlt; vuoto se decorativa |
| Tasto | Azione |
|---|---|
Tab / Shift+Tab |
Sposta il focus tra i controlli e i link delle slide |
Enter |
Segue il link della slide attiva |
Arrow Left / Arrow Right |
Navigazione tra le slide (gestita da Splide.js) |
:focus-visible è sempre visibile e non viene rimosso via CSSrole="group", aria-label per ogni slide e gli annunci di navigazionelabel deve descrivere il contenuto dello slider (es. “Notizie in evidenza”)imgAlt: "" per essere ignorate dagli screen readerhomepage (default): Layout ottimizzato per la homepage — usa rtds-slider--homepage con frecce ridimensionate dinamicamente tramite custom properties JS; ogni slide ha stretchAligned: true per occupare l’intera altezza del contenuto e button.buttonIcon: true per il pulsante iconaContesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context
.config.ymlusati durante lo sviluppo nella libreria.
label (stringa, obbligatorio): Etichetta nascosta dello slider — resa come <h2 class="rtds-sr-only"> con id="mainSliderLabel" per aria-labelledbyminHeight (stringa, opzionale): Altezza minima dello slider (es. 40rem)height (stringa, opzionale): Altezza dello slider (es. 66vh)maxHeight (stringa, opzionale): Altezza massima dello slider (es. 1000px)sliderBgColor (stringa, opzionale): Classe CSS per il colore di sfondo dell’overlaysliderBgOpacity (booleano, opzionale): Attiva la trasparenza dell’overlayslidePadding (stringa, opzionale): Classe CSS per il padding delle slidedecorationImage (stringa, opzionale): Percorso immagine decorativa — imposta --slider-decoration-image come stile inline sulla <section>classes (stringa, opzionale): Classi CSS aggiuntive per l’elemento <section>slides[])title (stringa, obbligatorio): Titolo della slide — renderizzato come <h3> con linkexcerpt (stringa, opzionale): Testo di presentazione sotto al titolo — accetta HTML (filtro safe)imgPath (stringa, opzionale): Percorso dell’immagine della slideimgAlt (stringa, opzionale): Testo alternativo dell’immagine; se assente o vuoto, l’immagine è trattata come decorativa (alt="")contentWidth (stringa, opzionale): Classi CSS per gestire la larghezza del blocco contenuto (es. rtds-w-full md:rtds-w-9/12 lg:rtds-w-7/12)contentBgColor (stringa, opzionale): Classe CSS per il colore di sfondo del blocco contenuto (es. rtds-bg-white)contentBgOpacity (stringa, opzionale): Classe CSS per l’opacità del blocco contenutocontentTextColor (stringa, opzionale): Classe CSS per il colore del testo del contenutocentered (booleano, opzionale): Centra il contenuto verticalmente e orizzontalmente nella slidetopAligned (booleano, opzionale): Allinea il contenuto in alto (solo allineamento verticale)bottomAligned (booleano, opzionale): Allinea il contenuto in basso (solo allineamento verticale)rightAligned (booleano, opzionale): Allinea il contenuto a destra — usare in combinazione con topAligned o bottomAlignedstretchAligned (booleano, opzionale): Estende il wrapper del contenuto per occupare l’intera altezza della slide (items-stretch)button (oggetto, opzionale): Configurazione del pulsante CTA della slidebuttonIcon (booleano, opzionale): Se true, renderizza un @button--icon con icona freccia destra al posto del pulsante testo