Erstellt einen Swiper im Template.
Diesem ViewHelper können durch Attribute weitere Settings mitgegeben werden. Wichtig ist, dass innerhalb des <bh:swiper>-Tags ein <div>-Tag und in diesem <div>-Tag die einzelnen Swiper-Slides vorhanden sind.
Attribute
| Name | Beschreibung | Type | default | required |
|---|---|---|---|---|
| navigation | Gibt die Pfeile für die Navigation des Swipers aus | boolean | 0 | false |
| pagination | Gibt die Punkte für die Navigation des Swipers aus | boolean | 0 | false |
| spaceBetween | Hier wird der Abstand zwischen den einzelnen Slides definiert (z. B. 20px, 50px etc.) | integer | 0 | false |
| centeredSlides | Zentriert die Spalten. Hierbei geht die responsive Höhe des Swipers verloren | boolean | 0 | false |
| loop | Elemente wiederholen sich | boolean | 0 | false |
| slideMinWidth | Bei Angabe von ganzzahligen Werten (z. B. 2, 3 etc.) wird die Spaltenanzahl definiert. Bei Angabe von Pixel-Werten (z. B. 350px, 400px etc.) wird die Mindestbreite der Swiper-Slides definiert. Es kann auch 'auto' mitgegeben werden, dann muss jedoch die Breite der einzelnen Swiper-Slides über CSS definiert werden (Achtung: nur für Profis) | mixed | - | false |
| autoplay | Der Swiper schaltet automatisch durch die einzelnen Swiper-Slides | boolean | 0 | false |
| effect | 'slide' oder 'fade' | string | slide | false |
Beispiel
html
<bh:swiper navigation="1" pagination="1" slideMinWidth="350px" spaceBetween="20px">
<div>
<f:for each="{room.images}" as="image">
<a href="{image.url}" class="swiper-slide" title="{image.title}">
<div class="fade-img-box">
</div>
</a>
</f:for>
</div>
</bh:swiper>