[GELÖST] UIkit 3 Slideshow im Fullscreen-Modus?
- gwiora
- Autor
- Junior Boarder
- Beiträge: 28
- Dank erhalten: 0
UIkit 3 Slideshow im Fullscreen-Modus? wurde erstellt von gwiora
In der Dokumentation des UIKit3 ist eine Option zum Umschalten in den Full-Screen-Mode definiert:
getuikit.com/v2/docs/slideshow.html
Man soll dazu die Klasse "uk-slideshow-fullscreen" hinzufügen:
Ich habe versucht die Klasse als "Class for Content" oder als "Header-Klasse" im Moduleditor hinzuzufügen, aber das hatte leider keinen Effekt. Im Debugger taucht die Klasse auch nirgendwo auf. Wie kann ich den Fullscreen-Modus aktivieren?
Danke und viele Grüße!
getuikit.com/v2/docs/slideshow.html
Man soll dazu die Klasse "uk-slideshow-fullscreen" hinzufügen:
<ul class="uk-slideshow uk-slideshow-fullscreen" data-uk-slideshow>...</ul>
Ich habe versucht die Klasse als "Class for Content" oder als "Header-Klasse" im Moduleditor hinzuzufügen, aber das hatte leider keinen Effekt. Im Debugger taucht die Klasse auch nirgendwo auf. Wie kann ich den Fullscreen-Modus aktivieren?
Danke und viele Grüße!
3 Jahre 3 Wochen her
#1
Bitte Anmelden oder Registrieren um der Konversation beizutreten.
- joomlaplates
- Moderator
- Beiträge: 2150
- Dank erhalten: 324
joomlaplates antwortete auf UIkit 3 Slideshow im Fullscreen-Modus?
Hallo,
1.) Sie sind auf der Uikit 2 Site. Uikit 3 ist hier
getuikit.com/docs/slideshow
2.) Da die Slideshow unser eigenes Modul ist mit vielen Parameter, können sie keinen Fullscreen Parameter hinzufügen.
Sie können jedoch die Uikit Slideshow auch als pures Custom html Module in Joomla nutzen.
Einfach den Code von der Slideshow in ein custom module einfügen ( Tiny Editor ausschalten)
1.) Sie sind auf der Uikit 2 Site. Uikit 3 ist hier
getuikit.com/docs/slideshow
2.) Da die Slideshow unser eigenes Modul ist mit vielen Parameter, können sie keinen Fullscreen Parameter hinzufügen.
Sie können jedoch die Uikit Slideshow auch als pures Custom html Module in Joomla nutzen.
Einfach den Code von der Slideshow in ein custom module einfügen ( Tiny Editor ausschalten)
3 Jahre 3 Wochen her
#2
Bitte Anmelden oder Registrieren um der Konversation beizutreten.
- gwiora
- Autor
- Junior Boarder
- Beiträge: 28
- Dank erhalten: 0
gwiora antwortete auf UIkit 3 Slideshow im Fullscreen-Modus?
1.) Sie sind auf der Uikit 2 Site. Uikit 3 ist hierOh, danke für die Tipp!
getuikit.com/docs/slideshow
2.) Da die Slideshow unser eigenes Modul ist mit vielen Parameter, können sie keinen Fullscreen Parameter hinzufügen.
Sie können jedoch die Uikit Slideshow auch als pures Custom html Module in Joomla nutzen.
Einfach den Code von der Slideshow in ein custom module einfügen ( Tiny Editor ausschalten)
Das hatte ich schon mal mit diesem Ansatz versucht der aber nicht funktioniert:
<div class="uk-slideshow-fullscreen">
<ul class="uk-slideshow-items ">
<li><img src="images/bild1.jpg" alt="Bild1" /></li>
<li><img src="images/bild2.jpg" alt="Bild2" /></li>
</ul>
</div>
Anstelle eines Slide-show-Moduls würde mir auch eine slide-show im Hintergrundbild gut gefallen. Dafür habe ich aber noch keine Lösung für "Dummies" gefunden. Existiert da etwas?
Danke und Grüße!
3 Jahre 3 Wochen her
#3
Bitte Anmelden oder Registrieren um der Konversation beizutreten.
- joomlaplates
- Moderator
- Beiträge: 2150
- Dank erhalten: 324
joomlaplates antwortete auf UIkit 3 Slideshow im Fullscreen-Modus?
Hallo,
1.) Uikit 2 läuft nicht mit Uikit 3
2.) im Uikit 3 heisst der Parameter > uk-height-viewport
getuikit.com/docs/slideshow#viewport-height
Hier der HTML Code
1.) Uikit 2 läuft nicht mit Uikit 3
2.) im Uikit 3 heisst der Parameter > uk-height-viewport
getuikit.com/docs/slideshow#viewport-height
Hier der HTML Code
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: false">
<ul class="uk-slideshow-items" uk-height-viewport="offset-top: true">
<li>
<img src="images/photo.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/dark.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/light.jpg" alt="" uk-cover>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
</div>
Folgende Benutzer bedankten sich: gwiora
Bitte Anmelden oder Registrieren um der Konversation beizutreten.