Neu Responsiver Slider für Mobilgeräte

Jutevital

Aktives 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
1.331
474
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

Aktives 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

Aktives 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

Aktives 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

Aktives 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
1.331
474
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

Aktives 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

Aktives 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 Eigene Kategorien für ebay Angebote oder JTL Wawi Kategorie Baum nutzen Einrichtung und Installation von JTL-eazyAuction 0
Neu GPSR Plugin für Gambio Connector steht bereit Gambio-Connector 0
Neu JTL-Infoschreiben "Wichtige Neuerung im Postgesetz zur Kennzeichnungspflicht" - Umsetzung auch für Österreichische Post Labels ? JTL-ShippingLabels - Ideen, Lob und Kritik 0
Neu Benutzerdefinierte Klasse für Überschrift anlegen funktioniert nicht Templates für JTL-Shop 2
Kategoriebox Nummer für Unterkategorien JTL-Wawi 1.9 2
20 % USt wird für UK nicht ausgewiesen - was mache ich falsch JTL-Wawi 1.9 4
Neu Spezialist für Rechnungsformular-Anpassung benötigt Dienstleistung, Jobs und Ähnliches 1
Getrenntes Lager für den JTL shop JTL-Wawi 1.9 1
Neu Benutzer Authentifizierung für externe App/Shop Onlineshop-Anbindung 1
Sql Abfrage VK Preise pro Kundengruppe für Grafana JTL-Wawi 1.8 9
Neu List & Label - Eigene SQL-Abfrage als Grundlage für Tabelle im Berichtscontainer? User helfen Usern - Fragen zu JTL-Wawi 10
Schnittstelle für Zalando, Kaufland und Otto JTL-Wawi 1.9 5
Neu Die Kennzeichnungspflicht für schwere Pakete kommt am 1.1.2025 JTL-ShippingLabels - Ideen, Lob und Kritik 0
Neu Ausgabeweg => Beschreibungen werden nicht von JTL Wawi gezogen für Shop/ebay/sonst was User helfen Usern - Fragen zu JTL-Wawi 3
Neu SQL Vartable für Reservierte Artikel gesucht User helfen Usern - Fragen zu JTL-Wawi 2
Herstellername / Verantwortliche Person für die EU für Kaufland kaufland.de - Anbindung (SCX) 1
Neu Umfrage: Scanpflicht auf Artikelebene (Nur für bestimmte Artikel aktivieren/deaktivieren) JTL-WMS / JTL-Packtisch+ - Ideen, Lob und Kritik 0
Neu Workflow und Version für Vorhaben Starten mit JTL: Projektabwicklung & Migration 3
Neu Rabatt für Bundles Allgemeine Fragen zu JTL-Shop 2
Neu Suche Dienstleister für Rechnungsvorlage, MwSt Sätze User helfen Usern - Fragen zu JTL-Wawi 0
Provisionsabrechnung für Vertrieb JTL-Wawi 1.9 1
Beantwortet Kosten für Aufträge aus Shopware 5 Shopware-Connector 1
Neu Artikelbestände für Stücklistenartikel blockieren User helfen Usern - Fragen zu JTL-Wawi 2
Neu Attribute für EWR Pflichtangaben - otto.de User helfen Usern - Fragen zu JTL-Wawi 5
Neu Amazon Lister 2.0 Fehlercode: SLR402 Bild "1.jpg" für das Angebot mit SKU "xxxxx" auf Channel "AMAZONDEJTL" wurde nicht gefunden Amazon-Lister - Ideen, Lob und Kritik 0
Neu Variable für Zulaufdatum User helfen Usern - Fragen zu JTL-Wawi 1
Neu Wichtige Infos zu GPSR-Attributen für JTL-eazyAuction und kommende JTL-Wawi Version 1.9.6.0 Einrichtung und Installation von JTL-eazyAuction 149
Welche Einstellung für "Überverkäufe nicht mehr möglich" wenn "alle Lagerbestände null" sind. JTL-Wawi 1.9 5
Neu Preisdarstellung: keine „ab“-Preise mehr mit Staffelpreisen für Produkte ohne Variationen (JTL Shop 5.3.3) Allgemeine Fragen zu JTL-Shop 1
Attribute für EWR Pflichtangaben (ab 13.12.2024) auf den Marktplätzen otto.de & kaufland.de Otto.de - Anbindung (SCX) 8
Neu GTIN/EAN für mehrere Artikel verwenden Arbeitsabläufe in JTL-Wawi 2
Rabatt für einzelnen Kunden einrichten JTL-Wawi 1.9 2
Neu Artikeletikett für Kinderartikel drucken mit GTIN Barcode funktioniert nicht User helfen Usern - Fragen zu JTL-Wawi 12
Neu Vorlage für Angeboten Rechnungsbetrag ändern Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 1
Neu S: Plugin Dropdown-Menü für meine Kategorien Plugins für JTL-Shop 10
Neu EVRI Label für Versand nach UK - wer benutzt es? Business Jungle 2
Nur bestimmte Bilder für einen Marktplatz aktivieren (Hood.de) JTL-Wawi 1.8 2
Neu Drucker für WMS getauscht - Zollpapiere werden nicht gedruckt JTL-ShippingLabels - Ideen, Lob und Kritik 1
Variable für Kundengruppe Allgemeine Fragen zu JTL-Shop 6
Neu Beschreibung für Amazon ohne HTML Inhalte Arbeitsabläufe in JTL-Wawi 3
Hilfe gesucht für Änderung der internen Schlüsselnummern! JTL-Wawi 1.9 8
Beantwortet Manueller Worklfow Rechnung für Mahnung, wie den offenen Rechnungsbetrag bei Teilrechnung ausgeben? JTL-Workflows - Ideen, Lob und Kritik 9
Tipps für effiziente Änderungen bestehender Artikel JTL-Wawi 1.7 2
Neu Bilder für alle Plattformen verwenden User helfen Usern - Fragen zu JTL-Wawi 8
Neu JTL WaWI abgleich mit Amazon für Deal Day & Black Friday User helfen Usern - Fragen zu JTL-Wawi 1
Onpage composer Texte für Merkmal Seiten Einrichtung JTL-Shop5 1
Neu Amazon Lister 2.0 - Code 99016 - Ein Maximum von 1 Vorkommen (oder Vorkommnissen) ist für das Attribut color zulässig Amazon-Lister - Fehler und Bugs 1
Neu Anbindung von JTL an Onlinehandel für GPSR (Produktsicherheit) Schnittstellen Import / Export 3
Sonderpreise für den Otto Marktplatz übertragen Otto.de - Anbindung (SCX) 1
Neu Suche Tipps für Plesk Settings Installation / Updates von JTL-Shop 0

Ähnliche Themen