Neu Responsiver Slider für Mobilgeräte

Jutevital

Mitglied
16. April 2020
10
1
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

Moderator
Mitarbeiter
11. Oktober 2018
497
146
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:
CSS:
@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

Mitglied
16. April 2020
10
1
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
 

Jutevital

Mitglied
16. April 2020
10
1
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
 
  • Gefällt mir
Reaktionen: MHillmann

Jutevital

Mitglied
16. April 2020
10
1
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

Mitglied
16. April 2020
10
1
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

Moderator
Mitarbeiter
11. Oktober 2018
497
146
Hallo,

sorry, das hab ich bisl aus den Augen verloren. An die Pfeile kommt ihr mobil so:
CSS:
@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

Mitglied
16. April 2020
10
1
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

Mitglied
16. April 2020
10
1
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.
 
Ähnliche Themen
Titel Forum Antworten Datum
Neu Top Artikel über Slider Technische Fragen zu Plugins und Templates 0
Neu OPC Bild-Video-Slider Portlet Technische Fragen zu Plugins und Templates 0
Neu Shop 5 Slider nur mit Ken Burn Effekt JTL-Shop - Fehler und Bugs 1
Neu Slider Warenkorb zufügen > Nova Templates für JTL-Shop 7
Neu JTL5 / Nova / Banner / Slider Startseite Betrieb / Pflege von JTL-Shop 0
Neu NOVA Template - kein Vorschaubild für Variationen im Slick-Slider Templates für JTL-Shop 0
Neu JTL Shop 5.0.1 Nova-Template Slick Slider Bildgröße fehlerhaft JTL-Shop - Fehler und Bugs 1
Neu JTL Shop5 mit Standart Template Nova Bildergröße für Banner und Slider ändern Allgemeine Fragen zu JTL-Shop 0
Neu Startseiten-Boxen (Sonderangebote) als Liste statt als Slider darstellen Allgemeine Fragen zu JTL-Shop 0
Neu Repository für Images Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 0
Neu Rechte für Ameise User helfen Usern - Fragen zu JTL-Wawi 0
Neu Datenbankfeld für Lieferschein gesucht - HAN Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 2
Beantwortet Pickliste für WMS Automatisch erstellen JTL-Workflows - Ideen, Lob und Kritik 1
Neu JTL-PayPal Plugin 1.1.3 für JTL Shop 4 Plugins für JTL-Shop 2
Neu Vorlage Lieferschein für Stücklistenartikel anpassen User helfen Usern - Fragen zu JTL-Wawi 0
Neu Steuernklassen gemappt für OSS ab 01.07.2021 Shopware-Connector 2
Neu Packhinweis für Sendungen an Packstationen Arbeitsabläufe in JTL-WMS / JTL-Packtisch+ 1
Neu Freelancer für Amazon FBA-Berechnung via Wawi gesucht Dienstleistung, Jobs und Ähnliches 1
Neu Firewall+Security Plugin für WordPress kompaktibel mit JTL Connector? WooCommerce-Connector 0
Neu Suche Inspiration für unseren neuen Shop5 User helfen Usern 0
Neu Kategorie/Artikel nur für bestimmte Zeit am Tag anzeigen oder bestellen User helfen Usern - Fragen zu JTL-Wawi 1
Neu Workflow: Auftrag für alle Artikel erstellen WENN User helfen Usern - Fragen zu JTL-Wawi 2
Neu Wie bekomme ich die Platzhalter für Bilder in eine neue Template? User helfen Usern - Fragen zu JTL-Wawi 1
Neu Gleicher Artikel von Verschiedenen Lieferanten richtig in WAWI aufnehmen für Drop Shipping. User helfen Usern - Fragen zu JTL-Wawi 3
Neu shop5 > canonical tags für eigene seiten enthalten doppelte urls? Allgemeine Fragen zu JTL-Shop 2
In Bearbeitung Empfehlung Smartphone als JTL-POS für kleinen Café JTL-POS - Fragen zu Hardware 7
In Diskussion Wiederkehrender Workflow für Priorisierungen bei Logistikspitzen JTL-Workflows - Ideen, Lob und Kritik 1
In Bearbeitung Ist die Artikelanzahl egal für die Nutzbarkeit? Allgemeine Fragen zu JTL-POS 4
Neu Shopware 6 - kryptische URL's für Varianten Shopware-Connector 2
Neu Variable Eigene Felder für Versandlabel User helfen Usern - Fragen zu JTL-Wawi 0
Neu Kosten für eine Anbindung WooCommerce-Connector 0
Neu Versandkosten für bestimmte Artikel ins Ausland User helfen Usern - Fragen zu JTL-Wawi 0
Gelöst Workflow für FBA Bestellungen greift irgendwie nicht mehr JTL-Workflows - Fehler und Bugs 2
JTL Themenwoche Heute: ***Partner-Perspektive** Folge 4: Best Practice für ein JTL-WMS Projekt - Direkt aus unserem Servicepartnernetzwerk Messen, Stammtische und interessante Events 0
JTL Themenwoche Heute: Logistic Lights – flexible Lichtassistenz für den Versandboxen-Prozess Messen, Stammtische und interessante Events 0
JTL Themenwoche Heute: Lagerautomatisierung für Einsteiger │ So lassen sich Kleinteilelager schnell, einfach & flexibel automatisieren Messen, Stammtische und interessante Events 0
JTL Themenwoche Heute: Ein Blick in die Zukunft │ Was hält JTL-Wawi 1.6 für JTL-WMS bereit? Messen, Stammtische und interessante Events 0
JTL Themenwoche Heute: Tipps & Tricks für JTL-WMS │ Insiderwissen für den Lagerprofi Messen, Stammtische und interessante Events 0
JTL Themenwoche Heute: JTL-WMS - "Ja, ich will." │ Eine Entscheidung für Effizienz und Flexibilität Messen, Stammtische und interessante Events 0
Neu Versanddatum für alle Pakete setzen - ausgegraut aber aktiv JTL-Wawi - Fehler und Bugs 1
JTL Themenwoche Heute: JTL-Packtisch+ oder JTL-WMS │ Welche Lösung ist die richtige für mich? Messen, Stammtische und interessante Events 0
Neu Beiträge für verschiedene Endgeräte ausblenden oder darstellen - JTL Basic Shop hosted by JTL Allgemeine Fragen zu JTL-Shop 2
Neu Filter für neu importierte Kategorien ohne Workflow User helfen Usern 0
Neu Tracking-Link-Variable für Sendungsreferenz Arbeitsabläufe in JTL-Wawi 2
Neu Wie kann ich für Lieferantenartikel die EK Staffelpreise importieren? Schnittstellen Import / Export 2
Neu Preise für EU Kunden im Shop netto Allgemeine Fragen zu JTL-Shop 2
Neu Shortcut Tastaturkürzel für Etikettendruck JTL-Wawi - Ideen, Lob und Kritik 3
In Diskussion DotLiquid Anweisung für alle Aufträge des Vortages JTL-Workflows - Fehler und Bugs 4
Neu Wie ändere ich den Wert, der für die Variable cGoogleCategorie hinterlegt ist? Betrieb / Pflege von JTL-Shop 3
Neu netzdinge.de > Google Codes > Anleitung für Google Tag Manager (GTM) Plugins für JTL-Shop 0

Ähnliche Themen