slider Cards im Header

Anwendungen für Webseiten. Künstliche Intelligenz verwenden.
Volker
Moderator
Moderator
Beiträge: 2266
Registriert: Sa 12. Dez 2020, 22:35

slider Cards im Header

Ungelesener Beitrag von Volker »

Hallo zusammen,
im Hersteller Forum hat eine gefragt ob sowas auch mit Mobirise möglich ist:https://www.nabshow.com/
Gemeint ist, dass der Slider unten das Bild welches gerade aktiv ist, oben im Header anzeigt.

Hat mich natürlich auch interresiert :D

JA ist möglich - mit 2 Blöcken. Oben der Header und darunter der Slider mit Cards. Ich hab das also mal nachgebaut.
Mein Slider den ich auch mit Lightbox liefere ( siehe hier viewtopic.php?f=42&t=1991)

Den Play/Pause Button muss ich noch rein klöppeln, aber es läuft schon und sieht ganz nett aus:
https://niederastroth.de/demo2/

Wenns fertig ist gibts also die 2 Blöcke bei mir zum download ;)
Volker
Moderator
Moderator
Beiträge: 2266
Registriert: Sa 12. Dez 2020, 22:35

Re: slider Cards im Header

Ungelesener Beitrag von Volker »

So,

heute habe ich mal 4 Blöcke gebaut :D

Es gibt aber nur ein Video ;)


Download ab Morgen auf meiner Seite

Demo schon hier für alle Blöcke : https://www.niederastroth.de/demo2/
Volker
Moderator
Moderator
Beiträge: 2266
Registriert: Sa 12. Dez 2020, 22:35

Re: slider Cards im Header

Ungelesener Beitrag von Volker »

Ich hab noch was neues erfunden ;)

Die Cards bleiben in Mobirise, werden aber nicht unter dem Header angezeigt sondern versteckt. So wird nur der Header mit den Texten und Bildern gefüttert.

https://www.niederastroth.de/demo3/

So kann man die Inhalte und Bilder leicht in Mobirise editieren ;)

Das zeig ich morgen mal im Video :D
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 8311
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: slider Cards im Header

Ungelesener Beitrag von Tommy Herrmann »

Moin,

Bin seit drei Tagen nur am Handy und kann daher nur wenig dazu sagen...

Was ich aber sagen kann ist, dass ich nicht verstehe warum Du Bilder wählst bei denen allen am Handy die Köpfe abgeschnitten sind :angst:

Screenshot_20260415_102157_Samsung Internet.jpg

Das sieht echt grausam aus, denn ich denke sonst ist das eine gute Idee.
Volker
Moderator
Moderator
Beiträge: 2266
Registriert: Sa 12. Dez 2020, 22:35

Re: slider Cards im Header

Ungelesener Beitrag von Volker »

Moin Tommy,

das war ja der Versuch des Nachbau dieser Seite: https://www.nabshow.com/ da ist das am Handy auch ausgeschaltet, bzw nur die Cards sichtbar. Ich kann das auch ausschalten für Handy. Hab ich nur mal drin gelassen um zu sehen wie es aussieht - Kacke ich weiß ;)

Es ging wie immer nur darum zu testen ob sowas überhaupt möglich ist. Das es möglich ist siet man ja. Das zu verfeinern ist dann die nächste Aufgabe ( für wen auch immer ) :D

Die Technisk: Oben ein Header der seine Bilder und auch die Texte aus den Cards zieht. Unten der Card Block der mit x beliebig vielen Cards gefüllt werden kann. Die Card in der Mitte die erhellt wird ist dann oben im Header zu sehen.

War ein ganzer Tag herumgefummel aber klappt. Ich hab das selbe Prinzip auch noch mal probiert und den Card Block versteckt, dass man nur den header mit den Bildern/text hat. So könnte man also ohne das mit json zu lösen direkt in Mobirise editieren und auf die Art den Header mit wechselnenden Bildern/Text bestücken. Dann noch verschiedene einblendeffekte für Text und Bilder und wieder was Neues :D

Auch meine neue Galerie Horizontal ist Geil, weil einfach per + Zeichen weitere Bilder einfach hinzugefügt werden.

Da ich ja den Header aus den Original auch nachbauen wollte, sieht das am Handy kacke aus, aber ish mach das jetzt mal mit dem Standard Header aus eine M5 Theme, da ist dann mehr platz fürs Bild ;)
Volker
Moderator
Moderator
Beiträge: 2266
Registriert: Sa 12. Dez 2020, 22:35

Re: slider Cards im Header

Ungelesener Beitrag von Volker »

Hier mal eine Version mit "normalen" Header der auch am Handy klappt:

https://niederastroth.de/demo4/

Cardslider diesmal sichtbar unter dem Header. Kann man auch per CSS und java script ausblenden dann sieht es eben aus wie bei meinem Beispiel hier: https://www.niederastroth.de/demo3/
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 3 Gäste