51751ABB-5214-4D7F-AB7F-8A7599AC7751 Created with sketchtool.

Slider

100% 
<!-- Swiper -->
<div class="swiper mySwiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="../../assets/img/slider/wn-geschenk-schleife.png" alt="WN ePaper App" title="WN ePaper App" class="flex_100_img margin-top_1rem">
            <h3>Willkommen bei unserem neuen ePaper!</h3>
            <div class="swiper-text">Sie kennen unsere digitale Ausgabe noch nicht? Dann<strong class="gate__label_bold"> schenken wir Ihnen gerne einmalig eine ePaper-Ausgabe</strong>, damit Sie sich selbst von den Vorzügen überzeugen können.</div>
        </div>
        <div class="swiper-slide">
            <img src="../../assets/img/slider/wn-epaper-app-icon.svg" alt="WN ePaper App" title="WN ePaper App" class="flex_50_img margin-top_2rem">
            <h3>Inhalte &amp; Funktionen</h3>
            <ul class="gate__list gate__check">
                <li class="gate__list-item"><strong class="gate__label_bold">Vorlesefunktion</strong> für Artikel</li>
                <li class="gate__list-item"><strong class="gate__label_bold">Ausgaben-Archiv</strong> der vergangenen 14 Tage</li>
                <li class="gate__list-item"><strong class="gate__label_bold">Leichte Auffindbarkeit</strong> und Handhabung aller redaktionellen Beilagen, Magazine und Prospekte</li>
            </ul>
        </div>
        <div class="swiper-slide">
            <img src="../../assets/img/slider/wn-sonderfunktionen.svg" alt="WN ePaper App" title="WN ePaper App" class="flex_50_img margin-top_2rem">
            <h3>Inhalte und Funktionen</h3>
            <ul class="gate__list gate__check">
                <li class="gate__list-item">Jeden Tag neue knifflige <strong class="gate__label_bold">Schwedenrätsel und Sudoku</strong></li>
                <li class="gate__list-item">Intuitive Handhabung der App</li>
                <li class="gate__list-item">Einfache Ausgaben-Verwaltung</li>
            </ul>
            <div>Viel Freude mit unserem ePaper!</div>
        </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
</div>
 
<!-- Swiper -->
<div class="swiper mySwiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="../../assets/img/slider/wn-geschenk-schleife.png" alt="WN ePaper App" title="WN ePaper App" class="flex_100_img margin-top_1rem">
            <h3>Willkommen bei unserem neuen ePaper!</h3>
            <div class="swiper-text">Sie kennen unsere digitale Ausgabe noch nicht? Dann<strong class="gate__label_bold"> schenken wir Ihnen gerne einmalig eine ePaper-Ausgabe</strong>, damit Sie sich selbst von den Vorzügen überzeugen können.</div>
        </div>
        <div class="swiper-slide">
            <img src="../../assets/img/slider/wn-epaper-app-icon.svg" alt="WN ePaper App" title="WN ePaper App" class="flex_50_img margin-top_2rem">
            <h3>Inhalte &amp; Funktionen</h3>
            <ul class="gate__list gate__check">
                <li class="gate__list-item"><strong class="gate__label_bold">Vorlesefunktion</strong> für Artikel</li>
                <li class="gate__list-item"><strong class="gate__label_bold">Ausgaben-Archiv</strong> der vergangenen 14 Tage</li>
                <li class="gate__list-item"><strong class="gate__label_bold">Leichte Auffindbarkeit</strong> und Handhabung aller redaktionellen Beilagen, Magazine und Prospekte</li>
            </ul>
        </div>
        <div class="swiper-slide">
            <img src="../../assets/img/slider/wn-sonderfunktionen.svg" alt="WN ePaper App" title="WN ePaper App" class="flex_50_img margin-top_2rem">
            <h3>Inhalte und Funktionen</h3>
                <ul class="gate__list gate__check">
                    <li class="gate__list-item">Jeden Tag neue knifflige <strong class="gate__label_bold">Schwedenrätsel und Sudoku</strong></li>
                    <li class="gate__list-item">Intuitive Handhabung der App</li>
                    <li class="gate__list-item">Einfache Ausgaben-Verwaltung</li>
                </ul>
            <div>Viel Freude mit unserem ePaper!</div>
        </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
</div>
 
{
  "additionalClasses": ""
}
  • Content: 
    import Swiper from 'swiper/swiper-bundle';

class Slider {
  constructor(element) {
    new Swiper(element, {
      autoHeight: true,
      spaceBetween: 20,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  }
}
export default Slider;
  • URL: /components/raw/slider/slider.js
  • Filesystem Path: src/patterns/20-components/slider/slider.js
  • Size: 390 Bytes

There are no notes for this item.