Mit diesen Snippets können Sie TinySlider direkt im HTML/Fluid Template konfigurieren und können den JavaScript dafür klein halten. Wir nutzen in diesem Beispiel einen Kachelslider, welcher direkt im Fluid definiert wird.
TinySlider im Fluid
Im Fluid kann man nun die Eigenschaften für seinen Slider einstellen. Das Fluid kann dann einfach kopiert werden und in einem anderen Element umkonfiguriert werden:
<div class="multislider" data-tiny-slider='{
"controls": true, "nav": true, "slideBy": 1, "mouseDrag": true, "gutter": 42,
"controlsPosition": "bottom", "navPosition": "bottom",
"controlsText": [
"<i class=\"icon icon-chevron-left\"></i>",
"<i class=\"icon icon-chevron-right\"></i>"
],
"responsive": {
"0": {
"items": 1
},
"576": {
"items": 2
},
"768": {
"items": 3
}
}
}'>
<div class="slide item-1">1</div>
<div class="slide item-2">2</div>
<div class="slide item-3">3</div>
<div class="slide item-4">4</div>
</div>
Wir können nun in unserer Javascript Library (z.B. main.js in Resources/Public) prüfen, ob es ein HTML Element mit der Klasse ".multislider" gibt. Wenn Ja, wollen wir die Eigenschaften (Options) aus "data-tiny-slider" holen:
if(document.getElementsByClassName('multislider')) {
var msliders = document.querySelectorAll('.multislider');
for (var i = 0; i < msliders.length; i++) {
opt = JSON.parse(msliders[i].getAttribute('data-tiny-slider'));
opt.container = msliders[i];
let multiSlider = tns(opt);
}
}
Die Optionen entnehmen Sie der sehr guten Dokumentation von TinySlider.
Wichtig: Beachten Sie immer die Syntax im HTML - Eigenschaften müssen immer mit Anführungszeichen (") geschrieben werden, Integer und Booleans werden ohne " geschrieben, Strings mit.