<link media="all" rel="stylesheet" href="../../assets/css/v7_carousel.css">
<div class="c-carousel" id="<?php echo esc_entities( $sID ); ?>">
<h3 class="u-label-03">
<a class="o-link-inverse u-mb-medium" 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">
<a class="u-block" href="#" target="_blank">
<picture>
<source srcset="https://unsplash.it/1000/563?random" media="(min-width: 740px)">
<img class="u-size-full u-size-full-height u-cover" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://citynews-romatoday.stgy.ovh/~media/vertical-hi/50932412562373/omicidio-san-giovanni-2.jpg" alt="">
</picture>
</a>
</figure>
<figure class="c-carousel__item u-relative u-size-full-height u-mr-small">
<a class="u-block" href="#" target="_blank">
<picture>
<source srcset="https://unsplash.it/1000/563?random" media="(min-width: 740px)">
<img class="u-size-full u-size-full-height u-cover" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://citynews-romatoday.stgy.ovh/~media/vertical-hi/50932412562373/omicidio-san-giovanni-2.jpg" alt="">
</picture>
</a>
</figure>
<figure class="c-carousel__item u-relative u-size-full-height u-mr-small">
<a class="u-block" href="#" target="_blank">
<picture>
<source srcset="https://unsplash.it/1000/563?random" media="(min-width: 740px)">
<img class="u-size-full u-size-full-height u-cover" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://citynews-romatoday.stgy.ovh/~media/vertical-hi/50932412562373/omicidio-san-giovanni-2.jpg" alt="">
</picture>
</a>
</figure>
<figure class="c-carousel__item u-relative u-size-full-height u-mr-small">
<a class="u-block" href="#" target="_blank">
<picture>
<source srcset="https://unsplash.it/1000/563?random" media="(min-width: 740px)">
<img class="u-size-full u-size-full-height u-cover" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://citynews-romatoday.stgy.ovh/~media/vertical-hi/50932412562373/omicidio-san-giovanni-2.jpg" alt="">
</picture>
</a>
</figure>
<figure class="c-carousel__item u-relative u-size-full-height u-mr-small">
<a class="u-block" href="#" target="_blank">
<picture>
<source srcset="https://unsplash.it/1000/563?random" media="(min-width: 740px)">
<img class="u-size-full u-size-full-height u-cover" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://citynews-romatoday.stgy.ovh/~media/vertical-hi/50932412562373/omicidio-san-giovanni-2.jpg" alt="">
</picture>
</a>
</figure>
</div>
</div>
<link media="all" rel="stylesheet" href="{{ '/assets/css/v7_carousel.css' | path }}">
<div class="c-carousel" id="<?php echo esc_entities( $sID ); ?>">
<h3 class="u-label-03">
<a class="o-link-inverse u-mb-medium" 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(0,5) %}
<figure class="c-carousel__item u-relative u-size-full-height u-mr-small">
<a class="u-block" href="#" target="_blank">
<picture>
<source srcset="{{media.horizontal}}" media="(min-width: 740px)">
<img class="u-size-full u-size-full-height u-cover" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="{{media.vertical}}" alt="">
</picture>
</a>
</figure>
{% endfor %}
</div>
</div>
{
"media": {
"horizontal": "https://unsplash.it/1000/563?random",
"vertical": "https://citynews-romatoday.stgy.ovh/~media/vertical-hi/50932412562373/omicidio-san-giovanni-2.jpg"
},
"title": "Turismo e coronavirus, quali località più colpite nell'estate 2020"
}
// Name: Gallery carousel
// Description: Display images in a carousel slider
//
// Component: `c-gallery-carousel`
//
// Dependencies: `settings/spacing.tokens`
// `v7_colors`
//
// ========================================================================
$scroll-size: 8px;
.c-carousel {
&__container {
scroll-snap-type: x mandatory;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
// Custom Firefox scrollbar style
scrollbar-color: $ui-01-50 $ui-01-10;
scrollbar-width: thin;
// Webkit scrollbar style
&::-webkit-scrollbar {
height: $scroll-size;
}
&::-webkit-scrollbar-track,
&::-webkit-scrollbar-thumb {
-webkit-border-radius: $scroll-size;
}
&::-webkit-scrollbar-track {
background: #{$ui-01-10};
}
&::-webkit-scrollbar-thumb {
background: #{$ui-01-50};
}
}
&__item {
scroll-snap-align: start;
min-width: 80%;
@include bp(md) {
min-width: 40%;
}
}
}