Was mich irritiert ist, dass Du schreibst "in Form eines png" und dass ich in dem Bild ein "Spiel1.jpg" sehe. Weder png noch jpg ist interaktiv? Bei WebGL denke ich eher an Canvas?
Was mich irritiert ist, dass Du schreibst "in Form eines png" und dass ich in dem Bild ein "Spiel1.jpg" sehe. Weder png noch jpg ist interaktiv? Bei WebGL denke ich eher an Canvas?
Entschuldige. Alles sollen Bilder(ob png oder jpg ist egal) sein. Wenn man auf die klickt, wird man natürlich auf eine andere Seite verklinkt. Also für jedes Spiel eine eigene Seite.
Ach so, verstehe. In dem Fall würde ich etwas vorgefertigtes nehmen, z. B. Swiper:
Ach so, verstehe. In dem Fall würde ich etwas vorgefertigtes nehmen, z. B. Swiper:
Hmm ich glaub ich wurde noch immer nicht richtig verstanden 
Sorry, irgendwie schwierig das auf Papier zu bringen.
Also ich will das gar nicht so kompliziert. Automat.jpg und die Arrows sollen sich gar nicht verändern. Nur das Bild im Automat (Spiel1.jpg, Spiel2.jpg, Spiel3.jpg) und dazu halt der richtige Link der immer auf eine separate Seite geht. Das Bild(und der Link) wird über das klicken auf die Arrows weitergeschaltetIch hoffe nun verständlicher 
So hatte ich es eigentlich auch verstanden. Aber alles machbar mit Swiper: automat.jpg müsste dann der Hintergrund für den Swiper-Container sein. Und die Bilder für die Spiele würden weiter geschaltet. HTML ist nötig, um ein a-Tag um die Bilder herum zu legen.
So hatte ich es eigentlich auch verstanden. Aber alles machbar mit Swiper: automat.jpg müsste dann der Hintergrund für den Swiper-Container sein. Und die Bilder für die Spiele würden weiter geschaltet. HTML ist nötig, um ein a-Tag um die Bilder herum zu legen.
Ist das auch irgendwie ohne die Json möglich?
Json? Meinst Du ohne Javascript? Schon, bei nur 3 Spielen recht einfach aber Du schreibst "vermutlich" und dann muss man daran denken, dass es erweiterbar sein müsste. Und das ist bei nur-CSS recht umständlich.
Json? Meinst Du ohne Javascript? Schon, bei nur 3 Spielen recht einfach aber Du schreibst "vermutlich" und dann muss man daran denken, dass es erweiterbar sein müsste. Und das ist bei nur-CSS recht umständlich.
Vielleicht etwas zum Background. Das ganze ist eine kleine Projektarbeit und es bleibt definitiv bei 3.
OK, dann würde ich auch zu etwas vorgefertigtem raten. Bei Codepen gibt es sicher jede Menge Slider nur mit CSS, z. B dieser:
OK, dann würde ich auch zu etwas vorgefertigtem raten. Bei Codepen gibt es sicher jede Menge Slider nur mit CSS, z. B dieser:
Danke. Das entspricht schon mehr was ich suche. Nur verstehe ich nicht ganz, wie er überhaupt die beiden Kreise zum weiterschalten erstellt hat. Und wie ich das hinkriege das die beiden außerhalb der Box sind und nicht innerhalb. Ich hab das ganze schon so weit bearbeitet das es ganz klein ist.
Das sind a-href-Tags, die er mit CSS zu Kreisen gemacht hat. Ab Zeile 147 im Codepen.
Das sind a-href-Tags, die er mit CSS zu Kreisen gemacht hat. Ab Zeile 147 im Codepen.
Ahhhhh
Aber wie kriege ich diese nun außerhalb. So wie ich es oben in der Skizze gezeigt habe?
Ich habe sie zunächst nach außen gelegt, war soweit kein Problem:
https://codepen.io/Sempervivum/pen/dyWYNvb
(Ich habe die Änderungen mit Pfeilen --> markiert und kommentiert).
So weit so gut. Nur wird jetzt links und rechts der benachbarte Container sichtbar und wenn ich das beheben will, werde ich mit den Nachteilen einer nur-CSS-Lösung konfrontiert: Ich müsste die prev-/next-Buttons aus dem Container heraus nehmen aber das geht nicht ohne weiteres, weil die Anordnung durch die Funktion eingeschränkt ist.
Mit Swiper dagegen kein Problem:
https://jsfiddle.net/Sempervivum/97usv5jy/4/
Statt der Texte "prev" und "next" kannst Du natürlich Bilder verwenden und statt des blauen Hintergrundes ebenfalls ein Bild.
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
