<div class="min-w-0">
<section id="mainSlider" class="n7-slider min-w-0 splide " aria-labelledby="mainSliderLabel">
<h2 id="mainSliderLabel" class="sr-only">Slider contenuti in evidenza</h2>
<div class="n7-slider__arrows splide__arrows">
<button class="n7-slider__arrow n7-slider__arrow--prev splide__arrow splide__arrow--prev">
<svg class="n7-icon inline-block align-middle fill-current n7-slider__arrow-svg" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
<span class="sr-only">Precedente</span>
</button>
<button class="n7-slider__arrow n7-slider__arrow--next splide__arrow splide__arrow--next">
<svg class="n7-icon inline-block align-middle fill-current n7-slider__arrow-svg" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
<span class="sr-only">Successiva</span>
</button>
</div>
<div class="n7-slider__track splide__track">
<ul class="n7-slider__list splide__list">
<li class="n7-slider__slide splide__slide n7-slide" data-slide-title="Centered slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus">
<div style="--min-height: 400px;--height: 66vh; --max-height: 1000px" class="n7-slide__slide-wrapper min-h-[--min-height] h-[--height] max-h-[--max-height] overflow-hidden grid grid-cols-1 grid-rows-1">
<div class="col-start-1 col-span-1 row-start-1 row-span-1 z-10 grid place-content-center justify-items-center items-center px-4 py-4 md:px-20 md:py-10 lg:px-32 lg:py-24 bg-black bg-opacity-30">
<div class="grid justify-items-center w-full md:w-9/12 lg:w-7/12 gap-6 p-10 bg-white">
<h3 class="text-2xl md:text-4xl font-bold">
Centered slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus
</h3>
<button type="button" class="n7-btn
n7-btn--primary
">
<span>
Scopri di più
<span class="sr-only">su: Centered slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus</span></span>
</button>
</div>
</div>
<img class="col-start-1 col-span-1 row-start-1 row-span-1 object-cover object-center w-full h-full" src="../../images/feathers.jpg" alt="" />
</div>
</li>
<li class="n7-slider__slide splide__slide n7-slide" data-slide-title="Top aligned slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus">
<div style="--min-height: 400px;--height: 66vh; --max-height: 1000px" class="n7-slide__slide-wrapper min-h-[--min-height] h-[--height] max-h-[--max-height] overflow-hidden grid grid-cols-1 grid-rows-1">
<div class="col-start-1 col-span-1 row-start-1 row-span-1 z-10 grid justify-start items-start px-4 py-4 md:px-20 md:py-10 lg:px-32 lg:py-24 bg-black bg-opacity-30">
<div class="grid justify-items-start w-full md:w-9/12 lg:w-7/12 gap-6 p-10 bg-white">
<h3 class="text-2xl md:text-4xl font-bold">
Top aligned slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus
</h3>
<button type="button" class="n7-btn
n7-btn--primary
">
<span>
Scopri di più
<span class="sr-only">su: Top aligned slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus</span></span>
</button>
</div>
</div>
<img class="col-start-1 col-span-1 row-start-1 row-span-1 object-cover object-center w-full h-full" src="../../images/feathers.jpg" alt="" />
</div>
</li>
<li class="n7-slider__slide splide__slide n7-slide" data-slide-title="Bottom aligned slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus">
<div style="--min-height: 400px;--height: 66vh; --max-height: 1000px" class="n7-slide__slide-wrapper min-h-[--min-height] h-[--height] max-h-[--max-height] overflow-hidden grid grid-cols-1 grid-rows-1">
<div class="col-start-1 col-span-1 row-start-1 row-span-1 z-10 grid justify-start items-end px-4 py-4 md:px-20 md:py-10 lg:px-32 lg:py-24 bg-black bg-opacity-30">
<div class="grid justify-items-start w-full md:w-9/12 lg:w-7/12 gap-6 p-10 bg-white">
<h3 class="text-2xl md:text-4xl font-bold">
Bottom aligned slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus
</h3>
<button type="button" class="n7-btn
n7-btn--primary
">
<span>
Scopri di più
<span class="sr-only">su: Bottom aligned slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus</span></span>
</button>
</div>
</div>
<img class="col-start-1 col-span-1 row-start-1 row-span-1 object-cover object-center w-full h-full" src="../../images/feathers.jpg" alt="" />
</div>
</li>
<li class="n7-slider__slide splide__slide n7-slide" data-slide-title="Default alignment slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus">
<div style="--min-height: 400px;--height: 66vh; --max-height: 1000px" class="n7-slide__slide-wrapper min-h-[--min-height] h-[--height] max-h-[--max-height] overflow-hidden grid grid-cols-1 grid-rows-1">
<div class="col-start-1 col-span-1 row-start-1 row-span-1 z-10 grid justify-start items-center px-4 py-4 md:px-20 md:py-10 lg:px-32 lg:py-24 bg-black bg-opacity-30">
<div class="grid justify-items-start w-full md:w-9/12 lg:w-7/12 gap-6 p-10 bg-white">
<h3 class="text-2xl md:text-4xl font-bold">
Default alignment slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus
</h3>
<button type="button" class="n7-btn
n7-btn--primary
">
<span>
Scopri di più
<span class="sr-only">su: Default alignment slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus</span></span>
</button>
</div>
</div>
<img class="col-start-1 col-span-1 row-start-1 row-span-1 object-cover object-center w-full h-full" src="../../images/feathers.jpg" alt="" />
</div>
</li>
<li class="n7-slider__slide splide__slide n7-slide" data-slide-title="Right top aligned alignment slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus">
<div style="--min-height: 400px;--height: 66vh; --max-height: 1000px" class="n7-slide__slide-wrapper min-h-[--min-height] h-[--height] max-h-[--max-height] overflow-hidden grid grid-cols-1 grid-rows-1">
<div class="col-start-1 col-span-1 row-start-1 row-span-1 z-10 grid justify-items-end items-start px-4 py-4 md:px-20 md:py-10 lg:px-32 lg:py-24 bg-black bg-opacity-30">
<div class="grid justify-items-start w-full md:w-9/12 lg:w-7/12 gap-6 p-10 bg-white">
<h3 class="text-2xl md:text-4xl font-bold">
Right top aligned alignment slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus
</h3>
<button type="button" class="n7-btn
n7-btn--primary
">
<span>
Scopri di più
<span class="sr-only">su: Right top aligned alignment slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus</span></span>
</button>
</div>
</div>
<img class="col-start-1 col-span-1 row-start-1 row-span-1 object-cover object-center w-full h-full" src="../../images/feathers.jpg" alt="" />
</div>
</li>
<li class="n7-slider__slide splide__slide n7-slide" data-slide-title="Right center aligned alignment slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus">
<div style="--min-height: 400px;--height: 66vh; --max-height: 1000px" class="n7-slide__slide-wrapper min-h-[--min-height] h-[--height] max-h-[--max-height] overflow-hidden grid grid-cols-1 grid-rows-1">
<div class="col-start-1 col-span-1 row-start-1 row-span-1 z-10 grid justify-items-end items-center px-4 py-4 md:px-20 md:py-10 lg:px-32 lg:py-24 bg-black bg-opacity-30">
<div class="grid justify-items-start w-full md:w-9/12 lg:w-7/12 gap-6 p-10 bg-white">
<h3 class="text-2xl md:text-4xl font-bold">
Right center aligned alignment slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus
</h3>
<button type="button" class="n7-btn
n7-btn--primary
">
<span>
Scopri di più
<span class="sr-only">su: Right center aligned alignment slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus</span></span>
</button>
</div>
</div>
<img class="col-start-1 col-span-1 row-start-1 row-span-1 object-cover object-center w-full h-full" src="../../images/feathers.jpg" alt="" />
</div>
</li>
<li class="n7-slider__slide splide__slide n7-slide" data-slide-title="Right bottom aligned alignment slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus">
<div style="--min-height: 400px;--height: 66vh; --max-height: 1000px" class="n7-slide__slide-wrapper min-h-[--min-height] h-[--height] max-h-[--max-height] overflow-hidden grid grid-cols-1 grid-rows-1">
<div class="col-start-1 col-span-1 row-start-1 row-span-1 z-10 grid justify-items-end items-end px-4 py-4 md:px-20 md:py-10 lg:px-32 lg:py-24 bg-black bg-opacity-30">
<div class="grid justify-items-start w-full md:w-9/12 lg:w-7/12 gap-6 p-10 bg-white">
<h3 class="text-2xl md:text-4xl font-bold">
Right bottom aligned alignment slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus
</h3>
<button type="button" class="n7-btn
n7-btn--primary
">
<span>
Scopri di più
<span class="sr-only">su: Right bottom aligned alignment slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus</span></span>
</button>
</div>
</div>
<img class="col-start-1 col-span-1 row-start-1 row-span-1 object-cover object-center w-full h-full" src="../../images/feathers.jpg" alt="" />
</div>
</li>
</ul>
</div>
</section>
</div>
<div class="min-w-0">
<section id="mainSlider"
class="n7-slider min-w-0 splide{% block classes %} {% if classes %} {{ classes }}{% endif %}{% endblock %}"
aria-labelledby="mainSliderLabel">
<h2 id="mainSliderLabel" class="sr-only">{{ label }}</h2>
{# Slider Arrows #}
<div class="n7-slider__arrows splide__arrows">
<button class="n7-slider__arrow n7-slider__arrow--prev splide__arrow splide__arrow--prev">
{% render '@icon', {id: 'mini--chevron-right', classes:
'n7-slider__arrow-svg', size: ''}, true %}
<span class="sr-only">Precedente</span>
</button>
<button class="n7-slider__arrow n7-slider__arrow--next splide__arrow splide__arrow--next">
{% render '@icon', {id: 'mini--chevron-right', classes:
'n7-slider__arrow-svg', size: ''}, true %}
<span class="sr-only">Successiva</span>
</button>
</div>
<div class="n7-slider__track splide__track">
<ul class="n7-slider__list splide__list">
{% for slide in slides %}
<li class="n7-slider__slide splide__slide n7-slide" data-slide-title="{{ slide.title }}">
<div
style="--min-height: {{minHeight}};--height: {{height}}; --max-height: {{maxHeight}}"
class="n7-slide__slide-wrapper min-h-[--min-height] h-[--height] max-h-[--max-height] overflow-hidden grid grid-cols-1 grid-rows-1"
>
<div
class="col-start-1 col-span-1 row-start-1 row-span-1 z-10 grid{% if slide.centered %} place-content-center justify-items-center{% elseif slide.rightAligned %} justify-items-end{% else %} justify-start{% endif %}{% if slide.topAligned %} items-start {% elseif slide.bottomAligned %} items-end{% else %} items-center{% endif %}{% if slidePadding %} {{ slidePadding }}{% endif %}{% if sliderBgColor %} {{ sliderBgColor }}{% endif %}{% if sliderBgOpacity %} {{ sliderBgOpacity }}{% endif %}"
>
<div
class="grid{% if slide.centered %} justify-items-center{% else %} justify-items-start{% endif %}{% if slide.contentWidth %} {{ slide.contentWidth }}{% endif %} gap-6 p-10{% if slide.contentBgColor %} {{ slide.contentBgColor }}{% endif %}{% if slide.contentBgOpacity %} {{ slide.contentBgOpacity }}{% endif %}{% if slide.contentTextColor %} {{ slide.contentTextColor }}{% endif %}"
>
<h3 class="text-2xl md:text-4xl font-bold">
{{ slide.title | safe}}
</h3>
{% if slide.excerpt %}
<p>{{ slide.excerpt | safe }}</p>
{% endif %} {% render '@button',{label: slide.ctaLabel, srOnlyLabel: 'su: ' + slide.title}, true %}
</div>
</div>
<img
class="col-start-1 col-span-1 row-start-1 row-span-1 object-cover object-center w-full h-full"
src="{{ slide.imgPath | path }}"
alt="{% if slide.imgAlt %}{{ slide.imgAlt }}{% else %}{% endif %}"
/>
</div>
</li>
{% endfor %}
</ul>
</div>
</section>
</div>
{
"label": "Slider contenuti in evidenza",
"minHeight": "400px",
"height": "66vh",
"maxHeight": "1000px",
"sliderBgColor": "bg-black",
"sliderBgOpacity": "bg-opacity-30",
"slidePadding": "px-4 py-4 md:px-20 md:py-10 lg:px-32 lg:py-24",
"slides": [
{
"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": "bg-white",
"contentWidth": "w-full md:w-9/12 lg:w-7/12"
},
{
"title": "Top aligned slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus",
"ctaLabel": "Scopri di più",
"imgPath": "/images/feathers.jpg",
"topAligned": true,
"contentBgColor": "bg-white",
"contentWidth": "w-full md:w-9/12 lg:w-7/12"
},
{
"title": "Bottom aligned slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus",
"ctaLabel": "Scopri di più",
"imgPath": "/images/feathers.jpg",
"bottomAligned": true,
"contentBgColor": "bg-white",
"contentWidth": "w-full md:w-9/12 lg:w-7/12"
},
{
"title": "Default alignment slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus",
"ctaLabel": "Scopri di più",
"imgPath": "/images/feathers.jpg",
"contentBgColor": "bg-white",
"contentWidth": "w-full md:w-9/12 lg:w-7/12"
},
{
"title": "Right top aligned alignment slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus",
"ctaLabel": "Scopri di più",
"imgPath": "/images/feathers.jpg",
"contentBgColor": "bg-white",
"contentWidth": "w-full md:w-9/12 lg:w-7/12",
"rightAligned": true,
"topAligned": true
},
{
"title": "Right center aligned alignment slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus",
"ctaLabel": "Scopri di più",
"imgPath": "/images/feathers.jpg",
"contentBgColor": "bg-white",
"contentWidth": "w-full md:w-9/12 lg:w-7/12",
"rightAligned": true
},
{
"title": "Right bottom aligned alignment slide Lorem ipsum dolor sit amet, consectetur adipiscing elit, aenean id pretium lacus",
"ctaLabel": "Scopri di più",
"imgPath": "/images/feathers.jpg",
"contentBgColor": "bg-white",
"contentWidth": "w-full md:w-9/12 lg:w-7/12",
"rightAligned": true,
"bottomAligned": true
}
]
}
/**
* SLIDER
*
*/
@layer components {
/* Slider buttons arrows - next/prev */
.n7-slider .splide__arrow {
@apply flex items-center justify-center w-8 h-8 md:w-10 md:h-10 lg:w-12 lg:h-12 opacity-100 n7-background-primary transition hover:n7-background-primary-dark rounded-none;
}
.n7-slider .splide__arrow--next, .splide__arrow--prev {
@apply z-20;
}
.n7-slider .splide__arrow--prev {
@apply left-0 md:left-5 lg:left-10;
}
.n7-slider .splide__arrow--next {
@apply right-0 md:right-5 lg:right-10;
}
/* Icon overriding */
.n7-slider .splide__arrow svg {
@apply text-white w-8 h-8;
}
.n7-slider .splide__pagination {
@apply absolute -bottom-8 block p-0 m-0 w-full list-none text-center;
}
.n7-slider .splide__pagination__page.is-active {
@apply bg-black opacity-100;
}
.n7-slider .splide__pagination__page {
@apply bg-black opacity-25 w-3 h-3 mx-2;
}
}
/*if (typeof jQuery === 'undefined') {
console.warn('jQuery non è caricato. Il carousel non verrà inizializzato.');
} else {
jQuery(function ($) {
'use strict';
$(document).ready(function () {
if (document.querySelector('#mainSlider')) {
$('#mainSlider').slick({
dots: true,
infinite: true,
regionLabel: 'Slider in evidenza',
nextArrow: '<button class="slick-next slick-arrow" type="button"><svg class="slick-arrow-svg inline-block align-middle fill-current w-full h-full" aria-hidden="true" focusable="false" role="img"><use xlink:href="/icons.svg#mini--chevron-right" /></svg></span><span class="slick-sr-only">Successiva</span></button>',
prevArrow: '<button class="slick-prev slick-arrow" type="button"><svg class="slick-arrow-svg inline-block align-middle fill-current w-full h-full" aria-hidden="true" focusable="false" role="img"><use xlink:href="/icons.svg#mini--chevron-left" /></svg></span><span class="slick-sr-only">Precedente</span></button>',
});
}
});
});
}*/
document.addEventListener('DOMContentLoaded', function() {
if (document.querySelector('#mainSlider')) {
var splide = new Splide( '#mainSlider', {
type : 'loop',
pagination: true,
} );
splide.mount();
}
});
Istance of Splide.js