<link media="all" rel="stylesheet" href="../../assets/css/v7_carousel.css">
<div class="c-carousel c-carousel--lightbox u-p-base" id="<?php echo esc_entities( $sID ); ?>">
<h3 class="u-label-03">
<a class="u-mb-medium c-carousel__name" href="#">
<svg class="o-icon o-icon--sm u-mr-xsmall u-mb-xxsmall">
<use xlink:href="#icon-camera"></use>
</svg>
Turismo e coronavirus, quali località più colpite nell'estate 2020
</a>
</h3>
<div class="c-carousel__container u-flex u-pb-base">
<figure class="c-carousel__item u-relative u-size-full-height u-mr-small u-ratio-1">
<a class="u-block" href="#media.horizontal1">
<picture>
<source srcset="https://unsplash.it/1000/563?random1" media="(min-width: 740px)">
<img class="u-size-full u-size-full-height u-cover u-radius-base u-ratio-1" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/450/600?random1" alt="">
</picture>
</a>
</figure>
<div class="c-carousel__overlay u-fixed u-overflow-hidden u-top u-left" id="media.horizontal1">
<div class="c-carousel__expanded u-flex u-justify-center u-items-center ">
<a href="#page" class="u-absolute u-size-full-height u-size-full"></a>
<a href="#media.horizontal0" class="c-carousel__arrow o-link-inverse u-absolute u-left u-p-small u-flex u-items-center">
<svg class="o-icon o-icon--md" data-dd-icon="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
</svg>
</a>
<figure class="o-bg-dark u-p-large u-relative u-flex u-column u-items-center u-justify-center">
<img class="c-carousel__full-img" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/1000/563?random1" alt="">
<figcaption class="u-p-small u-caption-01 u-color-inverse">Luca Pezzetta è uno dei pizzaioli più interessanti della sua generazione. Da Clementina reinterpreta i classici e propone la cucina di pesce, tra cotture al barbecue e stagionature</figcaption>
</figure>
<a href="#media.horizontal2" class="c-carousel__arrow o-link-inverse u-absolute u-right u-p-small u-flex u-items-center">
<svg class="o-icon o-icon--md" data-dd-icon="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</div>
</div>
<figure class="c-carousel__item u-relative u-size-full-height u-mr-small u-ratio-1">
<a class="u-block" href="#media.horizontal2">
<picture>
<source srcset="https://unsplash.it/1000/563?random2" media="(min-width: 740px)">
<img class="u-size-full u-size-full-height u-cover u-radius-base u-ratio-1" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/450/600?random2" alt="">
</picture>
</a>
</figure>
<div class="c-carousel__overlay u-fixed u-overflow-hidden u-top u-left" id="media.horizontal2">
<div class="c-carousel__expanded u-flex u-justify-center u-items-center ">
<a href="#page" class="u-absolute u-size-full-height u-size-full"></a>
<a href="#media.horizontal1" class="c-carousel__arrow o-link-inverse u-absolute u-left u-p-small u-flex u-items-center">
<svg class="o-icon o-icon--md" data-dd-icon="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
</svg>
</a>
<figure class="o-bg-dark u-p-large u-relative u-flex u-column u-items-center u-justify-center">
<img class="c-carousel__full-img" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/1000/563?random2" alt="">
<figcaption class="u-p-small u-caption-01 u-color-inverse">Luca Pezzetta è uno dei pizzaioli più interessanti della sua generazione. Da Clementina reinterpreta i classici e propone la cucina di pesce, tra cotture al barbecue e stagionature</figcaption>
</figure>
<a href="#media.horizontal3" class="c-carousel__arrow o-link-inverse u-absolute u-right u-p-small u-flex u-items-center">
<svg class="o-icon o-icon--md" data-dd-icon="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</div>
</div>
<figure class="c-carousel__item u-relative u-size-full-height u-mr-small u-ratio-1">
<a class="u-block" href="#media.horizontal3">
<picture>
<source srcset="https://unsplash.it/1000/563?random3" media="(min-width: 740px)">
<img class="u-size-full u-size-full-height u-cover u-radius-base u-ratio-1" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/450/600?random3" alt="">
</picture>
</a>
</figure>
<div class="c-carousel__overlay u-fixed u-overflow-hidden u-top u-left" id="media.horizontal3">
<div class="c-carousel__expanded u-flex u-justify-center u-items-center ">
<a href="#page" class="u-absolute u-size-full-height u-size-full"></a>
<a href="#media.horizontal2" class="c-carousel__arrow o-link-inverse u-absolute u-left u-p-small u-flex u-items-center">
<svg class="o-icon o-icon--md" data-dd-icon="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
</svg>
</a>
<figure class="o-bg-dark u-p-large u-relative u-flex u-column u-items-center u-justify-center">
<img class="c-carousel__full-img" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/1000/563?random3" alt="">
<figcaption class="u-p-small u-caption-01 u-color-inverse">Luca Pezzetta è uno dei pizzaioli più interessanti della sua generazione. Da Clementina reinterpreta i classici e propone la cucina di pesce, tra cotture al barbecue e stagionature</figcaption>
</figure>
<a href="#media.horizontal4" class="c-carousel__arrow o-link-inverse u-absolute u-right u-p-small u-flex u-items-center">
<svg class="o-icon o-icon--md" data-dd-icon="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</div>
</div>
<figure class="c-carousel__item u-relative u-size-full-height u-mr-small u-ratio-1">
<a class="u-block" href="#media.horizontal4">
<picture>
<source srcset="https://unsplash.it/1000/563?random4" media="(min-width: 740px)">
<img class="u-size-full u-size-full-height u-cover u-radius-base u-ratio-1" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/450/600?random4" alt="">
</picture>
</a>
</figure>
<div class="c-carousel__overlay u-fixed u-overflow-hidden u-top u-left" id="media.horizontal4">
<div class="c-carousel__expanded u-flex u-justify-center u-items-center ">
<a href="#page" class="u-absolute u-size-full-height u-size-full"></a>
<a href="#media.horizontal3" class="c-carousel__arrow o-link-inverse u-absolute u-left u-p-small u-flex u-items-center">
<svg class="o-icon o-icon--md" data-dd-icon="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
</svg>
</a>
<figure class="o-bg-dark u-p-large u-relative u-flex u-column u-items-center u-justify-center">
<img class="c-carousel__full-img" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/1000/563?random4" alt="">
<figcaption class="u-p-small u-caption-01 u-color-inverse">Luca Pezzetta è uno dei pizzaioli più interessanti della sua generazione. Da Clementina reinterpreta i classici e propone la cucina di pesce, tra cotture al barbecue e stagionature</figcaption>
</figure>
<a href="#media.horizontal5" class="c-carousel__arrow o-link-inverse u-absolute u-right u-p-small u-flex u-items-center">
<svg class="o-icon o-icon--md" data-dd-icon="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
<link media="all" rel="stylesheet" href="{{ '/assets/css/v7_carousel.css' | path }}">
<div class="c-carousel c-carousel--lightbox u-p-base" id="<?php echo esc_entities( $sID ); ?>">
<h3 class="u-label-03">
<a class="u-mb-medium c-carousel__name" href="#">
<svg class="o-icon o-icon--sm u-mr-xsmall u-mb-xxsmall"><use xlink:href="#icon-camera"></use></svg>
{{ title }}
</a>
</h3>
<div class="c-carousel__container u-flex u-pb-base">
{% for i in range(1,5) %}
<figure class="c-carousel__item u-relative u-size-full-height u-mr-small u-ratio-1">
<a class="u-block" href="#media.horizontal{{i}}">
<picture>
<source srcset="{{media.horizontal}}{{i}}" media="(min-width: 740px)">
<img class="u-size-full u-size-full-height u-cover u-radius-base u-ratio-1" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="{{media.vertical}}{{i}}" alt="">
</picture>
</a>
</figure>
<div class="c-carousel__overlay u-fixed u-overflow-hidden u-top u-left" id="media.horizontal{{i}}">
<div class="c-carousel__expanded u-flex u-justify-center u-items-center ">
<a href="#page" class="u-absolute u-size-full-height u-size-full"></a>
<a href="#media.horizontal{{i-1}}" class="c-carousel__arrow o-link-inverse u-absolute u-left u-p-small u-flex u-items-center">
<svg class="o-icon o-icon--md" data-dd-icon="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
</svg>
</a>
<figure class="o-bg-dark u-p-large u-relative u-flex u-column u-items-center u-justify-center">
<img class="c-carousel__full-img" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="{{media.horizontal}}{{i}}" alt="">
<figcaption class="u-p-small u-caption-01 u-color-inverse">{{abstract}}</figcaption>
</figure>
<a href="#media.horizontal{{i+1}}" class="c-carousel__arrow o-link-inverse u-absolute u-right u-p-small u-flex u-items-center">
<svg class="o-icon o-icon--md" data-dd-icon="">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
</svg>
</a>
</div>
</div>
{% endfor %}
</div>
</div>
{
"media": {
"horizontal": "https://unsplash.it/1000/563?random",
"vertical": "https://unsplash.it/450/600?random"
},
"title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
"abstract": "Luca Pezzetta è uno dei pizzaioli più interessanti della sua generazione. Da Clementina reinterpreta i classici e propone la cucina di pesce, tra cotture al barbecue e stagionature"
}
// Name: Gallery carousel
// Description: Display images in a carousel slider
//
// Component: `c-gallery-carousel`
//
// Dependencies: `settings/spacing.tokens`
// `v7_colors`
//
// ========================================================================
@use 'settings/v7/colors.tokens' as *;
@use 'settings/v7/spacing.tokens' as *;
@use 'settings/v7/layout-standard' as *;
@use 'settings/v7/global' as *;
@use 'settings/v7/scrollbar' as *;
@use 'tools/v7/mq' as *;
@use 'tools/v7/typography' as *;
@use 'tools/v7/zindex' as *;
// @use 'objects/v7/links' as *;
// @use 'objects/v7/icons' as *;
$scroll-size: 10px;
$lightbox-show: 1;
$lightbox-hide: 0;
$lightbox-full-size: 100%;
$lightbox-close-icon-position: -12px;
.c-carousel {
--scrollbar-track: #{$ui-04};
--scrollbar-thumb: #{$ui-07};
@media (prefers-color-scheme: dark) {
body:not([data-color-scheme*="light"]) & {
--scrollbar-track: #{$ui-07};
--scrollbar-thumb: #{$ui-03};
}
}
body[data-color-scheme*="dark"] {
--scrollbar-track: #{$ui-07};
--scrollbar-thumb: #{$ui-03};
}
&--lightbox {
background-color: var(--background-color-gray);
img {
margin-bottom: 0 !important;
}
.c-carousel__arrow {
background-color: rgba($ui-02, .6);
z-index: 99;
}
.c-carousel__name {
color: var(--body-color);
text-decoration: none;
}
.c-carousel__expanded picture {
touch-action: none;
z-index: 80;
}
}
&--figcaption {
.c-carousel__item::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 50%;
background: var(--ui-gradient, linear-gradient(180deg, rgba(13, 13, 13, 0.00) 0%, rgba(13, 13, 13, 0.30) 25.13%, rgba(13, 13, 13, 0.80) 100%));
}
}
&__container {
scroll-snap-type: x mandatory;
overflow-x: auto;
@include scrollbar;
}
&__item {
scroll-snap-align: center;
min-width: 80%;
@include bp(md) {
min-width: 20%;
}
}
&__expanded {
height: $lightbox-full-size;
a {
z-index: 9;
}
}
&__full-img {
max-height: 90vh;
opacity: $lightbox-hide;
transition: opacity .5s linear;
border-radius: 8px;
}
&__icon-close {
top: $lightbox-close-icon-position;
right: $lightbox-close-icon-position;
border: 2px solid $ui-01;
border-radius: 50%;
opacity: $lightbox-show;
background: $ui-02;
z-index: 999;
}
&__overlay {
width: $lightbox-hide;
height: $lightbox-hide;
background-color: rgba($ui-02, .8);
z-index: 999;
&:target {
width: $lightbox-full-size;
height: $lightbox-full-size;
& img,
& .btn-close {
opacity: $lightbox-show;
}
}
}
}
Display images in a carousel slider
Possible variations:
In order to display a carousel component use following syntax:
{% render "@carousel--default" %} {% render "@carousel--lightbox" %}