1300 #permalink Slider

Module: Mithril | React

Phoenix Standard-Styles für den Slider Swiper. Hierfür gibt es auch bereits einen Mithril-Wrapper (siehe Demo) als npm Komponente, dem letztendlich nur noch eine Reihe von Mithril-Komponenten zu übergeben sind. Die Styles kommen hier aus dem Design-System.

Example

Slide 1 mit hellem Hintergrund

Slide 2 mit weißem Hintegrund

Slide 3 mit grauem Hintergrund

Markup

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <!-- Custom Content. Kann weg bzw. ist zu ersetzen. -->
            <div style="font-weight:bold; text-align:center; padding: 5rem 0.5rem; background-color: #eeeef4">
                Slide 1 mit hellem Hintergrund
            </div>
        </div>
        <div class="swiper-slide">
            <!-- Custom Content. Kann weg bzw. ist zu ersetzen. -->
            <div style="font-weight:bold; text-align:center; padding: 5rem 0.5rem; background-color: #fff">
                Slide 2 mit weißem Hintegrund
            </div>
        </div>
        <div class="swiper-slide">
            <!-- Custom Content. Kann weg bzw. ist zu ersetzen. -->
            <div style="font-weight:bold; text-align:center; padding: 5rem 0.5rem; background-color: #cdcdce">
                Slide 3 mit grauem Hintergrund
            </div>
        </div>
    </div>
    <div class="swiper-scrollbar"></div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"><i class="fas fa-arrow-circle-left"></i></div>
    <div class="swiper-button-next"><i class="fas fa-arrow-circle-right"></i></div>
</div>

Source: src/vendors/_swiper.scss, line 1