(Rock-Solid)Slider Durch eigenes Template ansprechen

[Nacht69]

Hallo,

Für jede Seite können ein bis fünf Bilder zugewiesen werden die dann dynamisch angezeigt werden. Nun muss ich diese 1-5 Bilder noch in einen Slider packen. (Er sollte autoplay, fade und vor - zurück, responsive bieten)

Gibt es eine möglichkeit den Rocksolid Slider vom Template aus anzusprechen? Also vll irgendeine ID die ein div haben muss usw?

Oder wisst ihr eventuell einen Slider den man ohne Credits verwenden darf und nicht übermäßig viel code haben sollten?

Würde mich sehr über Antworten freuen!

[Thomas]

Rock Solid bietet ein kostenloses Design für Contao an!
Das könntest Du Dir mal anschauen und analysieren.

[Andreas]

Wie eigentlich für jedes Javascript Plugin brauchst du

1. Die Klasse (JS-Datei)
2. Das entsprechende HTML-Markup
3. Die Initialisierung des Plugins (mit eventuellen Optionen)
4. Alles eingebunden an den richtigen Stellen

Wenn du den Rocksolidslider also mal irgendwo einbindest, suche nach diesen Stellen und baue es in deinem Template nach. So mach ich das immer.

[RockSolid Themes]

Dein Template könnte zum Beispiel folgendermaßen aussehen:

<?php
	$GLOBALS['TL_JAVASCRIPT'][] = 'system/modules/rocksolid-slider/assets/js/rocksolid-slider.min.js|static';
	$GLOBALS['TL_CSS'][] = 'system/modules/rocksolid-slider/assets/css/rocksolid-slider.min.css||static';
	$GLOBALS['TL_CSS'][] = 'system/modules/rocksolid-slider/assets/css/default-skin.min.css||static';
?>
<div id="meine-slider-id">
	<img src="files/images/1.jpg" alt="">
	<img src="files/images/2.jpg" alt="">
	<img src="files/images/3.jpg" alt="">
</div>
<script>
jQuery('#meine-slider-id').rstSlider({
	type: 'fade',
	skin: 'default',
	autoplay: 8000,
	autoplayRestart: 12000,
	loop: true,
});
</script>

Alle möglichen Optionen findest du (in Englisch) auf GitHub.

Alternativ kannst du dir auch einen Slider anlegen mit allen gewünschten Einstellungen und dann die Optionen aus dem Quelltext im Frontend kopieren.

[Fehrmann]

An diesem Punkt würde ich gern eine Frage anschließen. Wir versuchen gerade, den Rocksolid-Slider in einem eigenen Frontend-Modul zu verwenden. Das hier beispielhaft gezeigte Template funktioniert so weit auch.

Meine Frage ist, wie ich das Template anpassen muss, damit ich auch Thumbnails verwenden kann. Also sprich, was muss ich im HTML-Markup ergänzen?

Viele Grüße
René

[Andreas]

Stelle dir einen Rocksolid-Slider so ein wie du ihn möchtest, dann schau dir im FE den Quellcode vor der Ausführung des JavaScripts an. Dieses Markup musst du dann nachbauen.