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.315
449
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.315
449
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 Reihenfolge im Slider JTL-Shop - Fehler und Bugs 4
Slider - Position auf der Startseite? Einrichtung JTL-Shop5 0
Neu Neues Plugin: Hersteller Slider Portlet (Zentrierungs- oder Schwarz/Weiß-Modus, Responsive Anpassung..) inkl. 5 kostenlosen Lizenzen Plugins für JTL-Shop 4
Neu Nova - Größe der Slides / Anzahl der Artikel bei Cross Selling Slider anpassen Templates für JTL-Shop 3
Neu Track&Trace für Österreichische Post JTL-Track&Trace - Ideen, Lob und Kritik 1
Neu PrestaShop Connector für Prestashop 8 mit PHP 8.2 wird nicht unterstützt PrestaShop-Connector 0
Neu Variablen für den Email Versand Einrichtung JTL-Shop5 0
Neu Nach Update auf 5.3 funktioniert das Video-Portlet für lokale Videos nicht Gelöste Themen in diesem Bereich 9
Wo befindet sich das Feld mit der Information für "Zustandsbeschreibung" auf Ebay? JTL-Wawi 1.8 9
Neu Egener Export für CBAM-Bericht möglich? JTL Ameise - Eigene Exporte 0
Beantwortet Globaler Haken für Überverkaufe ermöglichen JTL-Workflows - Fehler und Bugs 1
Neu JTL 1.8.12.0 - Artikelattribut für Shop importieren - Format CSV-Datei / Hilfe bei Import von individuellen Attributen für JTL-Shop (googlekat) JTL-Ameise - Ideen, Lob und Kritik 1
In Diskussion Benutzerdefinierten Standardpfad für Errorlogs definieren (Voting) JTL-Workflows - Ideen, Lob und Kritik 0
Neu Freitextfeld über Variation - Zeichenbeschränkung für Gravur Allgemeine Fragen zu JTL-Shop 8
Neu Template/ Vorlage für Bestellbestätigung gesucht Templates für JTL-Shop 0
WaWi Preisuntergrenze für Artikel festschreiben JTL-Wawi 1.7 4
Neu Variablen für Stücklistartikel in den neuen Vorlagen Angebot Auftrag Rechnung ect. Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 0
Neu Anleitung: Artikeletiketten für Auftrag, Rechnung, Lieferschein etc. drucken mit Etikettenanzahl = Artikelanzahl User helfen Usern - Fragen zu JTL-Wawi 0
Neu Zusatzkosten für Artikel Gelöste Themen in diesem Bereich 17
Neu Versandschein für Schweiz kann nicht gedruckt werden folgende Fehlermeldung JTL-ShippingLabels - Fehler und Bugs 1
Neu Bestellbestätigung email Variable Hinweistext für Downloadartikel Allgemeine Fragen zu JTL-Shop 3
Neu Dienstleister/Freelancer für Vorlagenerstellung Design gesucht Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 2
Neu JTL erstellt falsche Rechnungskorrekturen für Amazon.co.uk Aufträge und verweigert den Support Amazon-Anbindung - Fehler und Bugs 5
Neu Pickliste für Standardlager - Sortierung in WMS Mobile Arbeitsabläufe in JTL-WMS / JTL-Packtisch+ 0
Neu Workflow Web-Request Post für mollie Arbeitsabläufe in JTL-Wawi 5
Versuch Bilder aus Ebay für Kaufland zu übernehmen JTL-Wawi 1.8 0
Debitorennummern für bestehende und neue Kunden anlegen JTL-Wawi 1.8 2
Druckvorlage für Etiketten aus Auftragspositionen JTL-Wawi 1.8 4
Eigene Felder für Ebay-Listings verwenden JTL-Wawi 1.8 0
In Diskussion Automatische Zuweisung der Kategorien für Artikel durch Workflow JTL-Workflows - Ideen, Lob und Kritik 3
Gelöst Hardware für häufige Konstellationen mit USB und Swissbit TSE-Problem ab Android 11 JTL-POS - Fragen zu Hardware 5
Neu Wie erstelle ich das richtige Layout für handy, Desktop etc Allgemeine Fragen zu JTL-Shop 0
Beantwortet Preise für Kundengruppen berechnen JTL-Workflows - Ideen, Lob und Kritik 1
Tablet Empfehlung für JTL-WaWi APP? JTL-Wawi App 0
Neu Dienstleister für Erstellung eigener Produktseiten Amazon-Anbindung - Ideen, Lob und Kritik 4
Neu JTL Connector Woocomerce für PHP Version 7.4 WooCommerce-Connector 2
Neu Lizenz zu verkaufen für JTL-Shop Standard Edition Allgemeine Fragen zu JTL-Shop 4
In Diskussion Customworkflow für Angebot JTL-Workflows - Ideen, Lob und Kritik 1
Neu Exportvorlage für Versanddatenexport für DHL Versenden bzw. Versenden 3.0 Arbeitsabläufe in JTL-Wawi 0
Workflow für Artikel versandklassen JTL-Wawi 1.7 1
Workflow für Versandart Wenn/Und JTL-Wawi 1.7 0
Workflow für Amazon Zahlart erstellen JTL-Wawi 1.7 0
Neu Strukturierte Daten für VarKombis/Varianten nach Google Ankündigung vom 20.02.2024 JTL-Shop - Ideen, Lob und Kritik 0
Neu Bilder für Kindartikel Gelöste Themen in diesem Bereich 4
Neu Suchen Mitarbeiter für 40h Festanstellung gern auch 100% Homeoffice für Produkt und Kategorie Pflege mit der Wawi Dienstleistung, Jobs und Ähnliches 0
Amazon Bestellnummer für Datev Rechnungsdatenservice 2.0 JTL-Wawi 1.8 0
Neu 1.8.11.1 Kriterien für automatischen Zahlungsabgleich Arbeitsabläufe in JTL-Wawi 0
Neu NEU ✔️ PDF-Angebots-Plugin für den JTL-Shop 5 - PDF Angebote von der Produktseite oder aus dem Warenkorb heraus generieren B2C / B2B Plugins für JTL-Shop 5
Neu Connector für php 8.3 / Prestashop 8.1.3 PrestaShop-Connector 3
Neu OSS: Für Händler ins Ausland senden Business Jungle 2

Ähnliche Themen