Tiny Slider 2

Tiny Slider 2 als Ersatz für OWL der für tot erklärt wurde.

Normaler Slider mit fester Anzahl Slides

Normaler Mehrbildslider, anfangs 4 items, dann 3, dann 2, unter 500px 1 item

Main Slider mit 1 Slide

- Normaler Slider wie z. B. auf Startseiten
- mousedrag:false
- Das img muss: class="tns-lazy-img" data-src=path-to-image haben
- Mit picture Element und lazyLoad

Slider 1
Slider 1
Slider 1

Main Slider mit je 1 Slide und Text drüber gelegt

- Mit LazyLoad
- Das img muss: class="tns-lazy-img" data-src=path-to-image haben

Willkommen beim UHB

Dem Unternehmerverband Historische Baustoffe e.V.
Ein Zusammenschluss von Anbietern historischer Baustoffe und antiker Baumaterialien.

Willkommen beim UHB

Dem Unternehmerverband Historische Baustoffe e.V.
Ein Zusammenschluss von Anbietern historischer Baustoffe und antiker Baumaterialien.

Willkommen beim UHB

Dem Unternehmerverband Historische Baustoffe e.V.
Ein Zusammenschluss von Anbietern historischer Baustoffe und antiker Baumaterialien.

Slider mit unterschiedlichen Breiten aber 300px hoch

- Parameter mousedrag:false, autoWidth:true, nav:false da Dots hier nicht richtig zählen würden.
- NEXT und PREV funktionert bei kleinen Screens nicht, bei 2+etwas vom dritten Bild schon... wenn nav:true das Javascript Error
- Damit die Höhe stimmt, muss für die img max-width:none; gesetzt werden.
- SimpleLightbox wird beim Swipen zu schnell ausgelöst, oje... was soll ich da machen?(mousedrag:false setzen, swipen geht trotzdem)

To Test:

  • picture Element mehrere SCR pro item

Vorteile:

  • nur 13kb GZIPt klein - Keine Abhängigkeiten! (Der Rest braucht aber sowieso jQuery... SimpleLightbox)
  • Wird momentan gepflegt...
  • Alles wie bei OWL

Nachteile:

  • Das Dragging klappt nicht so richtig... irgendwie Aussetzer
  • SimpleLightbox wird beim Swipen zu schnell ausgelöst, wenn nicht mousedrag:false gesetzt ist.

Fazit:

Wenn die Bilder im Slider klickbar sein sollen, zum Beispiel für SimpleLightbox,
muss mousedrag:false gesetzt werden, da sonst beim Schieben mit der Maus der Klick ausgelöst wird. Blöd...
Swipen bei Touscreens geht aber trotzdem.

Bleibt das Problem, dass bei kleinen Screens und autoWidth die Controls nicht mehr funktionieren!

Naja... OWL is dead! What now?

Verweise: