Neu Responsiver Slider für Mobilgeräte

[Jutevital]

Hallo,

für unseren Shop https://jutevital.de nutzen wir JTL-Shop 5 und das NOVA-Template.

Wir verwenden auf der Startseite einen Slider, der auf Mobilgeräten verkleinert wird und damit eigentlich unbrauchbar wird. Wir wollen nun einen „responsiven“ Slider benutzen, der auf Mobilgeräten einen Slider in einem anderen Format anzeigen lässt (z.B. quadratisch).

Wir sind hier im Forum auf folgenden Beitrag gestoßen, der uns aber leider auch nicht weiterhilft:

https://forum.jtl-software.de/threa...s-von-picture-source-media-und-srcset.121149/

Über Hilfe wären wir sehr dankbar.

Viele Grüße
Julian

 

[MHillmann]

Hallo,

ich nehme an es geht um den Slider ganz oben auf euerer Startseite mit 3 Slides? Das Hauptproblem ist sicherlich, dass die Bilder im Original fast im 4:1 Format sind. Da kann auch ein quadratischer Slider nicht viel tun, ohne vom Bild links und rechts etwas abzuschneiden, bzw ohne auf der mobilen Version ein anderes (z.B. quadratisches) Bild zu laden. Das wird in dem anderen Thread ja beschrieben.
Mit dem Nivo-Slider könnte man prinzipiell recht schnell das Bild links und rechts beschneiden, indem man dem Bild eine Wunschhöhe gibt:

@media (max-width: 767.98px) {
    .nivoSlider img {
        height: 180px !important;
        object-fit: cover;
    }
}

Dazu sollt die Hauptinfo auf den Bildern aber gut zentriert sein, was bei 2 der 3 Bilder nicht gegeben ist, da der Text dort weiter rechts steht.

Vielleicht hilft das ja als Idee/Anregung. Probiert gern mal rum. Ansonsten müsste wohl ein anderer Slider her dem man im srcset verschiedene Bilder geben kann.

Viele Grüße
Michael

 

[Jutevital]

Hallo Michael,

vielen Dank für die schnelle Antwort! Ja genau, es geht um den Slider ganz oben auf der Startseite mit den drei Slides.

Dann versuchen wir als erstes mal deinen Code mit dem "Abschneiden".

Wir haben noch kein Child-Theme seit dem Umstieg auf JTL-Shop 5. In unserem Ordner Templates>NOVA war kein css-Ordner. Jetzt haben wir einen css-Ordner angelegt und eine css-Datei names "mytheme.css"mit dem Code hochgeladen.

Wahrscheinlich machen wir noch etwas falsch, da es noch nicht funktioniert?

Viele Grüße
Julian

 

[MHillmann]

Ich würde dringend zu einem Child-Template raten. Dazu hilft bestimmt folgendes: https://jtl-devguide.readthedocs.io...es_template.html#label-eigenes-child-template

Dort dann z.B. einfach in der custom.css obiges css eintragen.

 

[Jutevital]

Super, das hat funktioniert.

Das sieht schon sehr gut aus. Wir spielen ein bisschen rum und machen ggf. neue zentrierte Slides.

Falls wir weitere Fragen haben, melden wir uns.

Vielen Dank schon einmal!! Das hat uns sehr geholfen!!
Viele Grüße Julian

 

[Jutevital]

Hallo Michael,

das hat alles super funktioniert und wir arbeiten jetzt mit "zentrierten" Slides.

Bei zwei Dingen kommen wir nicht weiter:

1.) Gibt es eine Möglichkeit, dass man auf dem Mobilgerät die Slides swipen kann (touch swipe)?
2.) Irgendwie sind die Navigationspfeile links und rechts (bei der Deskopansicht) verschwunden, obwohl "Pfeilnavigation auf "anzeigen" steht.

Über Hilfe wären wir mal wieder dankbar 🙂

Viele Grüße
Julian

 

[Jutevital]

Hallo Michael,

kannst du uns bei den folgenden zwei Fragen behilflich sein?

1.) Gibt es eine Möglichkeit, dass man auf dem Mobilgerät die Slides swipen kann (touch swipe)?
2.) Irgendwie sind die Navigationspfeile links und rechts (bei der Deskopansicht) unsichtbar, obwohl "Pfeilnavigation auf "anzeigen" steht. Auch die Punktnavigation ist nicht sichtbar obwohl aktiviert.

Über Hilfe wären wir mal wieder dankbar 🙂

Viele Grüße
Julian

 

[MHillmann]

Hallo,

sorry, das hab ich bisl aus den Augen verloren. An die Pfeile kommt ihr mobil so:

@media (max-width: 767.98px) {
    .nivo-directionNav a {
        opacity: 1;
    }
}

bzgl des touch swipes kann ich spontan nichts sagen. Da müsste man mal gucken was der Nivo-Slider so kann.

Allgemein: Wenn Ihr noch viele Anpassungen an eurem Template machen wollt und selbst nicht so viel Zeit reinstecken könnt/wollt, dann könnt ihr auch mal bei einem Servicepartner bzgl. Hilfe anfragen.

Viele Grüße
Michael

 

[Jutevital]

Hallo,

vielen Dank für die schnelle Antwort.

Noch funktioniert es nicht. Unsere custom.css sieht nun folgendermaßen aus:

@media (max-width: 767.98px) { .nivoSlider img { height: 220px !important; object-fit: cover; } } @media (max-width: 767.98px) { .nivo-directionNav a { opacity: 1; } }

Vielleicht liegt es auch daran, dass Navigationspfeile/-punkte bei uns irgendwie nicht angezeigt werden, obwohl aktiviert?

Viele Grüße
Julian

 

[Jutevital]

Kann uns keiner helfen?

Weder die Punktnavigation noch die Navigationspfeile beim Slider sind sichtbar, obwohl aktiviert. Die Punktnavigation funktioniert (beim Hovern kommt die "Hand" für klickbare Links und es ist auch anklickbar) aber eben unsichtbar. Siehe hier: https://jutevital.de/

Über Hilfe wären wir sehr dankbar.