Markup: templates/output/06-components/page-slider.html
<section class="c-page-slider">
<div class="c-page-slider__slider splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide"><img class="c-page-slider__image" src="#" alt="Slider image 0" width="2000" height="1000" srcset="# 2500w" data-splide-lazy-srcset="
https://picsum.photos/id/191/2500/450 2500w,
https://picsum.photos/id/191/2000/450 2000w,
https://picsum.photos/id/191/1800/450 1800w,
https://picsum.photos/id/191/1600/450 1600w,
https://picsum.photos/id/191/1400/450 1400w,
https://picsum.photos/id/191/1200/450 1200w,
https://picsum.photos/id/191/1000/450 1000w,
https://picsum.photos/id/191/800/400 800w,
https://picsum.photos/id/191/600/300 600w,
https://picsum.photos/id/191/500/250 500w,
https://picsum.photos/id/191/400/200 400w
" sizes="
(min-width: 2300px) 2500px,
(min-width: 2000px) 2000px,
(min-width: 1800px) 1800px,
(min-width: 1600px) 1600px,
(min-width: 1400px) 1400px,
(min-width: 1200px) 1200px,
(min-width: 1000px) 1000px,
(min-width: 800px) 800px,
(min-width: 600px) 600px,
(min-width: 500px) 500px,
400px
"/></li>
<li class="splide__slide"><img class="c-page-slider__image" src="#" alt="Slider image 1" width="2000" height="1000" srcset="# 2500w" data-splide-lazy-srcset="
https://picsum.photos/id/107/2500/450 2500w,
https://picsum.photos/id/107/2000/450 2000w,
https://picsum.photos/id/107/1800/450 1800w,
https://picsum.photos/id/107/1600/450 1600w,
https://picsum.photos/id/107/1400/450 1400w,
https://picsum.photos/id/107/1200/450 1200w,
https://picsum.photos/id/107/1000/450 1000w,
https://picsum.photos/id/107/800/400 800w,
https://picsum.photos/id/107/600/300 600w,
https://picsum.photos/id/107/500/250 500w,
https://picsum.photos/id/107/400/200 400w
" sizes="
(min-width: 2300px) 2500px,
(min-width: 2000px) 2000px,
(min-width: 1800px) 1800px,
(min-width: 1600px) 1600px,
(min-width: 1400px) 1400px,
(min-width: 1200px) 1200px,
(min-width: 1000px) 1000px,
(min-width: 800px) 800px,
(min-width: 600px) 600px,
(min-width: 500px) 500px,
400px
"/></li>
<li class="splide__slide"><img class="c-page-slider__image" src="#" alt="Slider image 2" width="2000" height="1000" srcset="# 2500w" data-splide-lazy-srcset="
https://picsum.photos/id/177/2500/450 2500w,
https://picsum.photos/id/177/2000/450 2000w,
https://picsum.photos/id/177/1800/450 1800w,
https://picsum.photos/id/177/1600/450 1600w,
https://picsum.photos/id/177/1400/450 1400w,
https://picsum.photos/id/177/1200/450 1200w,
https://picsum.photos/id/177/1000/450 1000w,
https://picsum.photos/id/177/800/400 800w,
https://picsum.photos/id/177/600/300 600w,
https://picsum.photos/id/177/500/250 500w,
https://picsum.photos/id/177/400/200 400w
" sizes="
(min-width: 2300px) 2500px,
(min-width: 2000px) 2000px,
(min-width: 1800px) 1800px,
(min-width: 1600px) 1600px,
(min-width: 1400px) 1400px,
(min-width: 1200px) 1200px,
(min-width: 1000px) 1000px,
(min-width: 800px) 800px,
(min-width: 600px) 600px,
(min-width: 500px) 500px,
400px
"/></li>
<li class="splide__slide"><img class="c-page-slider__image" src="#" alt="Slider image 3" width="2000" height="1000" srcset="# 2500w" data-splide-lazy-srcset="
https://picsum.photos/id/206/2500/450 2500w,
https://picsum.photos/id/206/2000/450 2000w,
https://picsum.photos/id/206/1800/450 1800w,
https://picsum.photos/id/206/1600/450 1600w,
https://picsum.photos/id/206/1400/450 1400w,
https://picsum.photos/id/206/1200/450 1200w,
https://picsum.photos/id/206/1000/450 1000w,
https://picsum.photos/id/206/800/400 800w,
https://picsum.photos/id/206/600/300 600w,
https://picsum.photos/id/206/500/250 500w,
https://picsum.photos/id/206/400/200 400w
" sizes="
(min-width: 2300px) 2500px,
(min-width: 2000px) 2000px,
(min-width: 1800px) 1800px,
(min-width: 1600px) 1600px,
(min-width: 1400px) 1400px,
(min-width: 1200px) 1200px,
(min-width: 1000px) 1000px,
(min-width: 800px) 800px,
(min-width: 600px) 600px,
(min-width: 500px) 500px,
400px
"/></li>
<li class="splide__slide"><img class="c-page-slider__image" src="#" alt="Slider image 4" width="2000" height="1000" srcset="# 2500w" data-splide-lazy-srcset="
https://picsum.photos/id/278/2500/450 2500w,
https://picsum.photos/id/278/2000/450 2000w,
https://picsum.photos/id/278/1800/450 1800w,
https://picsum.photos/id/278/1600/450 1600w,
https://picsum.photos/id/278/1400/450 1400w,
https://picsum.photos/id/278/1200/450 1200w,
https://picsum.photos/id/278/1000/450 1000w,
https://picsum.photos/id/278/800/400 800w,
https://picsum.photos/id/278/600/300 600w,
https://picsum.photos/id/278/500/250 500w,
https://picsum.photos/id/278/400/200 400w
" sizes="
(min-width: 2300px) 2500px,
(min-width: 2000px) 2000px,
(min-width: 1800px) 1800px,
(min-width: 1600px) 1600px,
(min-width: 1400px) 1400px,
(min-width: 1200px) 1200px,
(min-width: 1000px) 1000px,
(min-width: 800px) 800px,
(min-width: 600px) 600px,
(min-width: 500px) 500px,
400px
"/></li>
</ul>
</div>
</div>
<div class="c-page-slider__content-wrapper">
<div class="c-page-slider__content">
<h1>Max-Mustermann-Realschule</h1><a class="btn u-mt-4" href="#">Zum Image-Film</a>
</div>
</div>
</section>
Source:
assets/sass/06-components/_components.page-slider.scss, line 5