step-slider
ⓘ Die Komponente ist dynamisch erweiterbar und flexibel anpassbar. Achte darauf, dass die Anzahl der Bilder und Texte immer gleich ist, damit alles optimal dargestellt wird.
Darstellung
Code
Code wurde kopiert!
<div class="step-slider-wrapper"> <div class="step-slider-content"> <div class="step-slider"> <div class="progress-circle"> <svg viewBox="0 0 36 36" class="circle-svg"> <path class="circle-progress" d="M18 2a16 16 0 1 1 0 32 16 16 0 1 1 0-32"></path> </svg> </div> <img decoding="async" class="image" src="/wp-content/themes/base-template-components/src/img/template/image-512x512.jpg" width="512" height="512" alt=""> <img decoding="async" class="image" src="/wp-content/themes/base-template-components/src/img/template/image-512x512.jpg" width="512" height="512" alt=""> <img decoding="async" class="image" src="/wp-content/themes/base-template-components/src/img/template/image-512x512.jpg" width="512" height="512" alt=""> <img decoding="async" class="image" src="/wp-content/themes/base-template-components/src/img/template/image-512x512.jpg" width="512" height="512" alt=""> </div> <div class="controls"> <button class="btn prev" aria-label="Vorheriger Schritt" disabled></button> <button id="playPauseButton" aria-label="Wiedergabe pausieren" class="btn on"></button> <button class="btn next" aria-label="Nächster Schritt"></button> </div> </div> <div class="step-slider-box"> <div class="step-slider-box-content active"> <small class="step-indicator"></small> <h3>Lorem ipsum</h3> <p>Dolor sit amet consectetur adipisicing elit. Doloribus distinctio et minima nulla rerum dolorem ipsam quae optio repudiandae cupiditate itaque ratione recusandae, vero, nisi sit ea consequatur omnis in.</p> </div> <div class="step-slider-box-content"> <small class="step-indicator"></small> <h3>Lorem ipsum</h3> <p>Dolor sit amet consectetur adipisicing elit. Doloribus distinctio et minima nulla rerum dolorem ipsam quae optio repudiandae cupiditate itaque ratione recusandae, vero, nisi sit ea consequatur omnis in.</p> </div> <div class="step-slider-box-content"> <small class="step-indicator"></small> <h3>Lorem ipsum</h3> <p>Dolor sit amet consectetur adipisicing elit. Doloribus distinctio et minima nulla rerum dolorem ipsam quae optio repudiandae cupiditate itaque ratione recusandae, vero, nisi sit ea consequatur omnis in.</p> </div> <div class="step-slider-box-content"> <small class="step-indicator"></small> <h3>Lorem ipsum</h3> <p>Dolor sit amet consectetur adipisicing elit. Doloribus distinctio et minima nulla rerum dolorem ipsam quae optio repudiandae cupiditate itaque ratione recusandae, vero, nisi sit ea consequatur omnis in.</p> </div> </div> </div>