Responsive Slider Beispielseite
Für die Verwendung des ulsliders braucht man nur eine DIV-Box und darin ein einfaches UL-Element mit jedem LI als ein Slider.
Der Inhalt der LI-Elemente kann beliebig sein. Bilder, Text, Videos...
Die DIV-Box braucht als class den Wert "ulslider_source" sowie weitere optionale "Pseudo"-Klassen um die Funktion des Sliders zu beeinflussen. Sind diese nicht angegeben, werden Standardwerte verwendet. Einige dieser Klassen können auch auf einzelne LI-Elemente angewendet werden, um einen Slide mit anderen Effekten zu versehen wie den Rest des gesamten Sliders.
Aufbau-Beispiel
<link rel="stylesheet" href="ulslider.css" type="text/css">
<script type="text/javascript" src="ulslider.min.js"></script>
<div class="ulslider_source">
<ul>
<li><img src="bild.jpg"></li>
<li><p>Hallo Welt</p></li>
<li><img src="bild2.jpg"></li>
</ul>
</div>
CSS-Klassen
Die Klassen sind nach folgenden Schema aufgebaut: ulslider_Funktion_Wert
| Funktion | Typ | Wert(e) (Standard) | DIV/LI | Beschreibung |
|---|---|---|---|---|
| source | string | - | div | Hat keinen Wert, definiert die DIV-Box als ulslider |
| type | string | slide/fade (fade) | div/li | Übergangseffekt, schieben oder überblenden |
| time | integer | 1000 | div/li | Animationszeit in ms |
| interval | integer | 3000 | div | Anzeigezeit eines Slides in ms |
| autoplay | bool | true/false (true) | div | Animation automatisch abspielen |
| arrows | bool | true/false (true) | div | Links/Rechts Pfeile zum Wechseln anzeigen |
| navigation | bool | true/false (true) | div | Navigationsleiste anzeigen |
| pausebutton | bool | true/false (false) | div | Pause Button neben Navigation anzeigen (um autoplay zu stoppen) |
| noan | string | left/right | li | Unterbindet "type" Animation in eine Richtung |
| resize | bool | true/false (true) | div | Der Slider passt sich automatisch an die Verfügbare Größe an (responsive) |
| navlistimg | bool | true/false (false) | div | Zeigt in der Navigation Bilder der Slides als Hintergrundbild (sofern Bild im Slide vorhanden) |
| loop | bool | true/false (true) | div | Slider springt am Ende zurück zum Anfang und umgekehrt |
Beispiel-Slider
Responsive Slider - Beispiel 1
Autoplay, Slide, Volle Navigation, Responsive (aber nicht äußere Box!), kein Loop
ulslider_source ulslider_type_slide ulslider_time_1500 ulslider_autoplay_true ulslider_interval_3000 ulslider_navigation_true ulslider_pausebutton_true ulslider_resize_true ulslider_loop_false
Responsive Slider - Beispiel 2
Autoplay, Fade, Volle Navigation, Responsive komplett
ulslider_source ulslider_type_fade ulslider_time_1500 ulslider_autoplay_true ulslider_interval_3000 ulslider_navigation_true ulslider_pausebutton_true ulslider_responsive_true
Responsive Slider - Beispiel 3
Autoplay, Fade, Volle Navigation, Responsive, Vorschaubilder
ulslider_source ulslider_type_fade ulslider_time_1500 ulslider_autoplay_true ulslider_interval_3000 ulslider_navigation_true ulslider_pausebutton_true ulslider_responsive_true ulslider_navlistimg_true
Gemischter Inhalt - Beispiel 1
Autoplay, Gemischte Effekte und Zeiten, keine Navigation, Responsive
ulslider_source ulslider_type_slide ulslider_time_1500 ulslider_autoplay_true ulslider_interval_3000 ulslider_arrows_false ulslider_navigation_false ulslider_responsive_true