<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" />
<input class="u-none" type="radio" name="slides" id="slides_6" />
<input class="u-none" type="radio" name="slides" id="slides_7" />
<ul class=" u-relative u-size-full u-p-none u-whitespace u-overflow-hidden">
<li class="u-relative u-inline-block u-size-full u-overflow-hidden 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--square
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">
<a class="u-no-underline" href="#">
<small class="c-story__channel u-label-02 u-uppercase u-py-xxxsmall u-px-xxsmall u-mb-small u-block">/notizie/</small>
</a>
<span class="u-label-02 u-py-xxxsmall u-px-xxsmall 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>
<div class="
u-color-inverse
u-truncate-4
c-story__summary u-truncate u-mb-none u-color-secondary u-body-03
">
Rebum takimata rebum est elitr eirmod voluptua consetetur lorem lorem. Clita ipsum invidunt rebum dolor ipsum clita duo labore, voluptua.
</div>
</header>
</div>
</article>
</li>
<li class="u-relative u-inline-block u-size-full u-overflow-hidden 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--square
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">
<a class="u-no-underline" href="#">
<small class="c-story__channel u-label-02 u-uppercase u-py-xxxsmall u-px-xxsmall u-mb-small u-block">/notizie/</small>
</a>
<span class="u-label-02 u-py-xxxsmall u-px-xxsmall 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>
<div class="
u-color-inverse
u-truncate-4
c-story__summary u-truncate u-mb-none u-color-secondary u-body-03
">
Rebum takimata rebum est elitr eirmod voluptua consetetur lorem lorem. Clita ipsum invidunt rebum dolor ipsum clita duo labore, voluptua.
</div>
</header>
</div>
</article>
</li>
<li class="u-relative u-inline-block u-size-full u-overflow-hidden 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--square
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">
<a class="u-no-underline" href="#">
<small class="c-story__channel u-label-02 u-uppercase u-py-xxxsmall u-px-xxsmall u-mb-small u-block">/notizie/</small>
</a>
<span class="u-label-02 u-py-xxxsmall u-px-xxsmall 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>
<div class="
u-color-inverse
u-truncate-4
c-story__summary u-truncate u-mb-none u-color-secondary u-body-03
">
Rebum takimata rebum est elitr eirmod voluptua consetetur lorem lorem. Clita ipsum invidunt rebum dolor ipsum clita duo labore, voluptua.
</div>
</header>
</div>
</article>
</li>
<li class="u-relative u-inline-block u-size-full u-overflow-hidden 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--square
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">
<a class="u-no-underline" href="#">
<small class="c-story__channel u-label-02 u-uppercase u-py-xxxsmall u-px-xxsmall u-mb-small u-block">/notizie/</small>
</a>
<span class="u-label-02 u-py-xxxsmall u-px-xxsmall 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>
<div class="
u-color-inverse
u-truncate-4
c-story__summary u-truncate u-mb-none u-color-secondary u-body-03
">
Rebum takimata rebum est elitr eirmod voluptua consetetur lorem lorem. Clita ipsum invidunt rebum dolor ipsum clita duo labore, voluptua.
</div>
</header>
</div>
</article>
</li>
<li class="u-relative u-inline-block u-size-full u-overflow-hidden 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--square
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">
<a class="u-no-underline" href="#">
<small class="c-story__channel u-label-02 u-uppercase u-py-xxxsmall u-px-xxsmall u-mb-small u-block">/notizie/</small>
</a>
<span class="u-label-02 u-py-xxxsmall u-px-xxsmall 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>
<div class="
u-color-inverse
u-truncate-4
c-story__summary u-truncate u-mb-none u-color-secondary u-body-03
">
Rebum takimata rebum est elitr eirmod voluptua consetetur lorem lorem. Clita ipsum invidunt rebum dolor ipsum clita duo labore, voluptua.
</div>
</header>
</div>
</article>
</li>
<li class="u-relative u-inline-block u-size-full u-overflow-hidden 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--square
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">
<a class="u-no-underline" href="#">
<small class="c-story__channel u-label-02 u-uppercase u-py-xxxsmall u-px-xxsmall u-mb-small u-block">/notizie/</small>
</a>
<span class="u-label-02 u-py-xxxsmall u-px-xxsmall 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>
<div class="
u-color-inverse
u-truncate-4
c-story__summary u-truncate u-mb-none u-color-secondary u-body-03
">
Rebum takimata rebum est elitr eirmod voluptua consetetur lorem lorem. Clita ipsum invidunt rebum dolor ipsum clita duo labore, voluptua.
</div>
</header>
</div>
</article>
</li>
<li class="u-relative u-inline-block u-size-full u-overflow-hidden 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--square
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">
<a class="u-no-underline" href="#">
<small class="c-story__channel u-label-02 u-uppercase u-py-xxxsmall u-px-xxsmall u-mb-small u-block">/notizie/</small>
</a>
<span class="u-label-02 u-py-xxxsmall u-px-xxsmall 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>
<div class="
u-color-inverse
u-truncate-4
c-story__summary u-truncate u-mb-none u-color-secondary u-body-03
">
Rebum takimata rebum est elitr eirmod voluptua consetetur lorem lorem. Clita ipsum invidunt rebum dolor ipsum clita duo labore, voluptua.
</div>
</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>
<label for="slides_6" class="u-absolute u-none u-cursor-pointer goto-last "></label>
<label for="slides_7" 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>
<label class="u-relative u-radius-circle u-cursor-pointer" for="slides_6"></label>
<label class="u-relative u-radius-circle u-cursor-pointer" for="slides_7"></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, 8) %}
<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-p-none u-whitespace u-overflow-hidden">
{% for i in range(1, 8) %}
<li class="u-relative u-inline-block u-size-full u-overflow-hidden 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, 8) %}
<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, 8) %}
<label class="u-relative u-radius-circle u-cursor-pointer" for="slides_{{ i }}"></label>
{% endfor %}
</div>
</div>
</div>
</section>
/* No context defined. */
// Name: Slider
// Description: The slider is a responsive display of elements that can be scrolled through using the mouse or touch gestures.
//
// Component: `c-slider`
//
//
// Variants: `.c-slider--scroll`
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/settings/v7/scrollbar' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;
.c-slider {
padding-bottom: $padding-xxxlarge;
@include bp(lg){
padding-bottom: 0;
}
@for $i from 0 through 7 {
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 {
bottom: 2rem;
left: 50%;
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%;
z-index: 9;
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%;
}
}
}
// Scroll snap version
&--scroll {
// &::after,
// &::before {
// position: absolute;
// bottom: 50%;
// content: '\00a0';
// display:inline-block;
// width: 1rem;
// height: 1rem;
// padding: 1rem;
// border-radius: 50%;
// background-repeat: no-repeat;
// background-size: contain;
// color: $color-white;
// font-size: 1.5rem;
// @include z(base);
// background-color: var(--background-color-dark);
// }
// &::after {
// left: $margin-base;
// background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWFycm93LWxlZnQtY2lyY2xlIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCIvPjxwb2x5bGluZSBwb2ludHM9IjEyIDggOCAxMiAxMiAxNiIvPjxsaW5lIHgxPSIxNiIgeTE9IjEyIiB4Mj0iOCIgeTI9IjEyIi8+PC9zdmc+');
// }
// &::before {
// left: calc(100% - 3rem);
// background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWFycm93LXJpZ2h0LWNpcmNsZSI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz48cG9seWxpbmUgcG9pbnRzPSIxMiAxNiAxNiAxMiAxMiA4Ii8+PGxpbmUgeDE9IjgiIHkxPSIxMiIgeDI9IjE2IiB5Mj0iMTIiLz48L3N2Zz4=');
// }
.c-slider__arrows {
&-prev {
left: $margin-base;
}
&-next {
left: calc(100% - 3rem);
}
&-prev,
&-next {
bottom: 50%;
padding: $padding-base;
@include z(cover);
}
}
.c-slider__container {
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
@include scrollbar;
}
.c-slider__item {
justify-content: center;
min-width: 100%;
scroll-snap-align: center;
scroll-snap-stop: always;
}
}
}
Create a list of items to use as a responsive carousel slider
The slider is a responsive display of elements that can be scrolled through using the mouse or scroll.
Possible layout variations:
Defaul - slider can be scrolled through using the mouse
Scroll - slider can be scrolled through using the scroll
In order to display a slider component use following syntax:
{% render "@slider--default" %} {% render "@slider--scroll" %}