slider

Darstellung

Bilder-Slider

Das Szenario vermittelt die Stille und Erhabenheit der Natur.
Ein kristallklarer Gebirgsbach schlängelt sich durch eine üppig grüne Waldlandschaft, während Sonnenstrahlen durch das Blätterdach fallen. Das Bild strahlt Frische und Vitalität aus und lädt zum Verweilen ein.
Ein weitläufiger Strand bei Sonnenuntergang, an dem rötliche Wolkenmassen den Himmel dramatisch färben. Die Wellen umspülen sanft den feinen Sand, während Möwen über dem Horizont kreisen.
Eine ruhige Bergwiese, übersät mit bunten Wildblumen, vor der majestätischen Kulisse schneebedeckter Gipfel. Der Kontrast zwischen blühender Flora im Vordergrund und imposanter Gebirgswelt im Hintergrund wirkt atemberaubend.
Ein dichter Wald im goldenen Licht des späten Nachmittags, wo lange Schatten über moosbedeckte Stämme fallen. Vögel zwitschern leise in den Baumkronen und erhöhen das Gefühl friedlicher Abgeschiedenheit.
Ein Panorama einer endlosen Prärie unter einem weiten Himmel, in dem sich dramatische Wolkenformationen türmen. Die Landschaft vermittelt Freiheit und Weite, mit leicht wehenden Gräsern im Vordergrund.
Ein klarer Gebirgssee, dessen spiegelglatte Oberfläche die umliegenden Fichten und Berghänge reflektiert. Die ruhige Wasserfläche wirkt beruhigend und lädt zu einem meditativen Moment ein.
Eine steile Klippe mit wild tosenden Wellen, die gegen ihre Felsen prallen, unter einem moody bewölkten Himmel. Das Bild fängt die rohe Kraft und das ungezähmte Temperament der See ein.
Code

Code wurde kopiert!
<h2>Bilder-Slider</h2>

<div class="gallery-slider" role="region" aria-roledescription="Karussell" aria-label="Bildergalerie"><div class="gallery-slider__track" aria-live="polite">
<div class="slide"><img decoding="async" src="https://picsum.photos/1600/1200?random=2" alt="Das Szenario vermittelt die Stille und Erhabenheit der Natur."></div>
<div class="slide"><img decoding="async" src="https://picsum.photos/1600/1200?random=3" alt="Ein kristallklarer Gebirgsbach schlängelt sich durch eine üppig grüne Waldlandschaft, während Sonnenstrahlen durch das Blätterdach fallen. Das Bild strahlt Frische und Vitalität aus und lädt zum Verweilen ein."></div>
<div class="slide"><img decoding="async" src="https://picsum.photos/1600/1200?random=4" alt="Ein weitläufiger Strand bei Sonnenuntergang, an dem rötliche Wolkenmassen den Himmel dramatisch färben. Die Wellen umspülen sanft den feinen Sand, während Möwen über dem Horizont kreisen."></div>
<div class="slide"><img decoding="async" src="https://picsum.photos/1600/1200?random=5" alt="Eine ruhige Bergwiese, übersät mit bunten Wildblumen, vor der majestätischen Kulisse schneebedeckter Gipfel. Der Kontrast zwischen blühender Flora im Vordergrund und imposanter Gebirgswelt im Hintergrund wirkt atemberaubend."></div>
<div class="slide"><img decoding="async" src="https://picsum.photos/1600/1200?random=6" alt="Ein dichter Wald im goldenen Licht des späten Nachmittags, wo lange Schatten über moosbedeckte Stämme fallen. Vögel zwitschern leise in den Baumkronen und erhöhen das Gefühl friedlicher Abgeschiedenheit."></div>
<div class="slide"><img decoding="async" src="https://picsum.photos/1600/1200?random=7" alt="Ein Panorama einer endlosen Prärie unter einem weiten Himmel, in dem sich dramatische Wolkenformationen türmen. Die Landschaft vermittelt Freiheit und Weite, mit leicht wehenden Gräsern im Vordergrund."></div>
<div class="slide"><img decoding="async" src="https://picsum.photos/1600/1200?random=8" alt="Ein klarer Gebirgssee, dessen spiegelglatte Oberfläche die umliegenden Fichten und Berghänge reflektiert. Die ruhige Wasserfläche wirkt beruhigend und lädt zu einem meditativen Moment ein."></div>
<div class="slide"><img decoding="async" src="https://picsum.photos/1600/1200?random=9" alt="Eine steile Klippe mit wild tosenden Wellen, die gegen ihre Felsen prallen, unter einem moody bewölkten Himmel. Das Bild fängt die rohe Kraft und das ungezähmte Temperament der See ein."></div>
</div><div class="gallery-slider__pagination">  <div class="progressbar"><div class="progressbar-fill"></div></div></div><nav class="gallery-slider__controls">  <button type="button" class="btn icon-left round btn-prev" aria-label="Zurück"><span class="icn arrow-6"></span></button>  <button type="button" class="btn icon-left round btn-next" aria-label="Weiter"><span class="icn arrow-6"></span></button></nav></div><dialog class="lightbox" aria-modal="true" aria-label="Bildvergrößerung">  <div class="lightbox__container">    <div class="lightbox__image-wrapper">      <button type="button" class="btn icon-left round lightbox__close" aria-label="Lightbox schließen"><span class="icn iclose"></span></button>      <button type="button" class="btn icon-left round lightbox__prev btn-prev" aria-label=""><span class="icn arrow-6"></span></button>      <img class="lightbox__img" alt="" />      <button type="button" class="btn icon-left round lightbox__next btn-next" aria-label=""><span class="icn arrow-6"></span></button>      <p class="lightbox__caption"></p>    </div>  </div></dialog>

<!--

<h2>Div-Slider</h2>

[slider]
<div class="slide"><div class="box"><h3>Titel</h3><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum dolores molestias sequi soluta corrupti maiores libero provident exercitationem, numquam aliquid. Delectus ex laudantium mollitia neque corporis odio ducimus ut?</p></div></div>
<div class="slide"><div class="box"><h3>Titel</h3><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum dolores molestias sequi soluta corrupti maiores libero provident exercitationem, numquam aliquid. Delectus ex laudantium mollitia neque corporis odio ducimus ut?</p></div></div>
<div class="slide"><div class="box"><h3>Titel</h3><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum dolores molestias sequi soluta corrupti maiores libero provident exercitationem, numquam aliquid. Delectus ex laudantium mollitia neque corporis odio ducimus ut?</p></div></div>
<div class="slide"><div class="box"><h3>Titel</h3><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum dolores molestias sequi soluta corrupti maiores libero provident exercitationem, numquam aliquid. Delectus ex laudantium mollitia neque corporis odio ducimus ut?</p></div></div>
<div class="slide"><div class="box"><h3>Titel</h3><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum dolores molestias sequi soluta corrupti maiores libero provident exercitationem, numquam aliquid. Delectus ex laudantium mollitia neque corporis odio ducimus ut?</p></div></div>
<div class="slide"><div class="box"><h3>Titel</h3><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit dolorum dolores molestias sequi soluta corrupti maiores libero provident exercitationem, numquam aliquid. Delectus ex laudantium mollitia neque corporis odio ducimus ut?</p></div></div>
[/slider]

-->