<section class="c-slider u-relative u-inline-block u-size-full u-overflow-hidden o-bg-dark">
<div class="">
<input class="u-none" type="radio" name="slides" checked="checked" id="slides_1" />
<input class="u-none" type="radio" name="slides" id="slides_2" />
<input class="u-none" type="radio" name="slides" id="slides_3" />
<input class="u-none" type="radio" name="slides" id="slides_4" />
<input class="u-none" type="radio" name="slides" id="slides_5" />
<ul class=" u-relative u-size-full u-table u-p-none u-nowrap u-overflow-hidden">
<li class="u-relative u-inline-block u-size-full u-overflow-hidden u-nowrap u-px-small">
<article class="c-story c-story--square-dark " data-channel="/notizie/">
<div class="c-story__media ">
<figure class="o-skeleton o-skeleton-media--5-4 u-relative">
<a class="u-block u-size-full u-absolute u-left u-top" href="#">
<picture>
<img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/600/600?random" alt="Angels there and shore with or. The visiter chamber clasp.">
</picture>
</a>
</figure>
</div>
<div class="c-story__content u-relative">
<header class="c-story__header ">
<div class="c-story__kicker u-mb-xsmall">
<span class="u-label-02 u-ml-medium u-relative u-line-decoration u-block">Label</span>
</div>
<a class="o-link-text" href="#">
<h1 class="
c-story__heading
u-heading-10
u-m-none"><span class="u-decoration u-decoration--highlighted u-my-large">Angels there and shore with or. The visiter chamber clasp.</span></h1>
</a>
<p class="
u-color-inverse
u-truncate-4
c-story__summary u-body-03 u-truncate u-mb-none ">Rebum takimata rebum est elitr eirmod voluptua consetetur lorem lorem. Clita ipsum invidunt rebum dolor ipsum clita duo labore, voluptua.
</p>
</header>
</div>
</article>
</li>
<li class="u-relative u-inline-block u-size-full u-overflow-hidden u-nowrap u-px-small">
<article class="c-story c-story--square-dark " data-channel="/notizie/">
<div class="c-story__media ">
<figure class="o-skeleton o-skeleton-media--5-4 u-relative">
<a class="u-block u-size-full u-absolute u-left u-top" href="#">
<picture>
<img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/600/600?random" alt="Angels there and shore with or. The visiter chamber clasp.">
</picture>
</a>
</figure>
</div>
<div class="c-story__content u-relative">
<header class="c-story__header ">
<div class="c-story__kicker u-mb-xsmall">
<span class="u-label-02 u-ml-medium u-relative u-line-decoration u-block">Label</span>
</div>
<a class="o-link-text" href="#">
<h1 class="
c-story__heading
u-heading-10
u-m-none"><span class="u-decoration u-decoration--highlighted u-my-large">Angels there and shore with or. The visiter chamber clasp.</span></h1>
</a>
<p class="
u-color-inverse
u-truncate-4
c-story__summary u-body-03 u-truncate u-mb-none ">Rebum takimata rebum est elitr eirmod voluptua consetetur lorem lorem. Clita ipsum invidunt rebum dolor ipsum clita duo labore, voluptua.
</p>
</header>
</div>
</article>
</li>
<li class="u-relative u-inline-block u-size-full u-overflow-hidden u-nowrap u-px-small">
<article class="c-story c-story--square-dark " data-channel="/notizie/">
<div class="c-story__media ">
<figure class="o-skeleton o-skeleton-media--5-4 u-relative">
<a class="u-block u-size-full u-absolute u-left u-top" href="#">
<picture>
<img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/600/600?random" alt="Angels there and shore with or. The visiter chamber clasp.">
</picture>
</a>
</figure>
</div>
<div class="c-story__content u-relative">
<header class="c-story__header ">
<div class="c-story__kicker u-mb-xsmall">
<span class="u-label-02 u-ml-medium u-relative u-line-decoration u-block">Label</span>
</div>
<a class="o-link-text" href="#">
<h1 class="
c-story__heading
u-heading-10
u-m-none"><span class="u-decoration u-decoration--highlighted u-my-large">Angels there and shore with or. The visiter chamber clasp.</span></h1>
</a>
<p class="
u-color-inverse
u-truncate-4
c-story__summary u-body-03 u-truncate u-mb-none ">Rebum takimata rebum est elitr eirmod voluptua consetetur lorem lorem. Clita ipsum invidunt rebum dolor ipsum clita duo labore, voluptua.
</p>
</header>
</div>
</article>
</li>
<li class="u-relative u-inline-block u-size-full u-overflow-hidden u-nowrap u-px-small">
<article class="c-story c-story--square-dark " data-channel="/notizie/">
<div class="c-story__media ">
<figure class="o-skeleton o-skeleton-media--5-4 u-relative">
<a class="u-block u-size-full u-absolute u-left u-top" href="#">
<picture>
<img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/600/600?random" alt="Angels there and shore with or. The visiter chamber clasp.">
</picture>
</a>
</figure>
</div>
<div class="c-story__content u-relative">
<header class="c-story__header ">
<div class="c-story__kicker u-mb-xsmall">
<span class="u-label-02 u-ml-medium u-relative u-line-decoration u-block">Label</span>
</div>
<a class="o-link-text" href="#">
<h1 class="
c-story__heading
u-heading-10
u-m-none"><span class="u-decoration u-decoration--highlighted u-my-large">Angels there and shore with or. The visiter chamber clasp.</span></h1>
</a>
<p class="
u-color-inverse
u-truncate-4
c-story__summary u-body-03 u-truncate u-mb-none ">Rebum takimata rebum est elitr eirmod voluptua consetetur lorem lorem. Clita ipsum invidunt rebum dolor ipsum clita duo labore, voluptua.
</p>
</header>
</div>
</article>
</li>
<li class="u-relative u-inline-block u-size-full u-overflow-hidden u-nowrap u-px-small">
<article class="c-story c-story--square-dark " data-channel="/notizie/">
<div class="c-story__media ">
<figure class="o-skeleton o-skeleton-media--5-4 u-relative">
<a class="u-block u-size-full u-absolute u-left u-top" href="#">
<picture>
<img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/600/600?random" alt="Angels there and shore with or. The visiter chamber clasp.">
</picture>
</a>
</figure>
</div>
<div class="c-story__content u-relative">
<header class="c-story__header ">
<div class="c-story__kicker u-mb-xsmall">
<span class="u-label-02 u-ml-medium u-relative u-line-decoration u-block">Label</span>
</div>
<a class="o-link-text" href="#">
<h1 class="
c-story__heading
u-heading-10
u-m-none"><span class="u-decoration u-decoration--highlighted u-my-large">Angels there and shore with or. The visiter chamber clasp.</span></h1>
</a>
<p class="
u-color-inverse
u-truncate-4
c-story__summary u-body-03 u-truncate u-mb-none ">Rebum takimata rebum est elitr eirmod voluptua consetetur lorem lorem. Clita ipsum invidunt rebum dolor ipsum clita duo labore, voluptua.
</p>
</header>
</div>
</article>
</li>
</ul>
<div class="c-slider__arrows u-absolute u-bottom-small">
<label for="slides_1" class="u-absolute u-none u-cursor-pointer goto-first "></label>
<label for="slides_2" class="u-absolute u-none u-cursor-pointer "></label>
<label for="slides_3" class="u-absolute u-none u-cursor-pointer "></label>
<label for="slides_4" class="u-absolute u-none u-cursor-pointer "></label>
<label for="slides_5" class="u-absolute u-none u-cursor-pointer "></label>
</div>
<div class="c-slider__navigation u-absolute u-text-center">
<div>
<label class="u-relative u-radius-circle u-cursor-pointer" for="slides_1"></label>
<label class="u-relative u-radius-circle u-cursor-pointer" for="slides_2"></label>
<label class="u-relative u-radius-circle u-cursor-pointer" for="slides_3"></label>
<label class="u-relative u-radius-circle u-cursor-pointer" for="slides_4"></label>
<label class="u-relative u-radius-circle u-cursor-pointer" for="slides_5"></label>
</div>
</div>
</div>
</section>
<section class="c-slider u-relative u-inline-block u-size-full u-overflow-hidden o-bg-dark">
<div class="">
{% for i in range(1, 6) %}
<input class="u-none" type="radio" name="slides" {% if i==1 %} checked="checked"{% endif %} id="slides_{{ i }}"/>
{% endfor %}
<ul class=" u-relative u-size-full u-table u-p-none u-nowrap u-overflow-hidden">
{% for i in range(1, 6) %}
<li class="u-relative u-inline-block u-size-full u-overflow-hidden u-nowrap u-px-small">{% render '@story--square-dark' %}</li>
{% endfor %}
</ul>
<div class="c-slider__arrows u-absolute u-bottom-small">
{% for i in range(1, 6) %}
<label for="slides_{{i}}" class="u-absolute u-none u-cursor-pointer {% if i==1 %} goto-first {% elif i== 6 %} goto-last {% endif %}"></label>
{% endfor %}
</div>
<div class="c-slider__navigation u-absolute u-text-center">
<div>
{% for i in range(1, 6) %}
<label class="u-relative u-radius-circle u-cursor-pointer" for="slides_{{ i }}"></label>
{% endfor %}
</div>
</div>
</div>
</section>
/* No context defined. */
.c-slider {
padding-bottom: $padding-xxxlarge;
@include bp(lg){
padding-bottom: 0;
}
@for $i from 0 through 5 {
input:nth-of-type(#{$i + 1}):checked {
~ ul li:first-of-type {
margin-left: #{$i * -101%};
@include bp(sm){
margin-left: #{$i * -100%};
}
}
~ .c-slider__navigation label:nth-of-type(#{$i + 1}):after {
opacity: 1;
}
~ .c-slider__arrows > label:nth-of-type(#{$i}) {
right: auto;
left: 0%;
display: block;
transform: rotate(45deg);
}
~ .c-slider__arrows > label:nth-of-type(#{$i + 2}) {
right: 0;
left: auto;
display: block;
transform: rotate(225deg);
}
}
}
ul {
box-sizing: border-box;
margin: 0 auto;
> li {
white-space: normal;
transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
}
}
.c-slider__navigation {
left: 50%;
bottom: 2rem;
user-select: none;
-webkit-touch-callout: none;
@include bp(md){
left: 13%;
}
div {
margin-left: -100%;
}
label {
display: inline-block;
margin: 0 4px;
padding: 4px;
background: $ui-04;
user-select: none;
-webkit-touch-callout: none;
&::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
margin-top: -6px;
margin-left: -6px;
padding: 6px;
border-radius: 50%;
opacity: 0;
background: $ui-06;
}
&:hover:after {
opacity: 1;
}
}
}
&.inside .c-slider__navigation {
bottom: 10px;
margin-bottom: 10px;
label {
border: 1px solid #7e7e7e;
}
}
input {
&:first-of-type:checked ~ .c-slider__arrows label.goto-last {
right: auto;
left: 0;
display: block;
transform: rotate(45deg);
}
&:last-of-type:checked ~ .c-slider__arrows label.goto-first {
right: 0;
left: auto;
display: block;
transform: rotate(225deg);
}
}
.c-slider__arrows {
bottom: .9rem;
left: 5%;
box-sizing: content-box;
width: 90%;
height: 21px;
user-select: none;
-webkit-touch-callout: none;
@include bp(md){
left: 3%;
width: 20%;
}
label {
top: -50%;
padding: 4px;
box-shadow: inset 2px -2px 0 0px $ui-01;
transition: box-shadow 0.15s, margin 0.15s;
user-select: none;
-webkit-touch-callout: none;
&:hover {
margin: 0 0px;
&::before {
background-color: var(--background-color-muted-alpha);
}
}
&::before {
position: absolute;
top: -75%;
left: -75%;
content: '';
width: 250%;
height: 250%;
border-radius: 50%;
}
}
}
}
No notes defined.