Neu Produktbilder unterhalb des Hauptbildes, Vergrößerung ohne Überlappung, Carousel

[Paulina_nana]

Hallo,

ich habe folgendes Problem. Ich möchte die kleinen Vorschaubilder auf der Produktdetailseite vergrößert unterhalb des Hauptbildes darstellen. Leider überlappen sich meine Bilder dadurch nun. Wie kann ich das verhindern? Wenn möglich würde ich das gerne mit einem Carousel lösen oder alternativ die Bilder in zwei Zeilen darstellen.

Beispielseite: https://alpamayo-taschen.de/Anzugtasche

Danke!
Paulina

 

[Paulina_nana]

Hab es mit Änderungen an .image-gallery ul.image-thumbs li img und .thumbs-box hinbekommen

 

[FPrüfer]

Siehe: https://forum.jtl-software.de/threads/produktbilder-slider-soll-horizontal-sein.96691/#post-542402

 

[Paulina_nana]

Den Code hatte ich so schon eingefügt. Trotzdem haben sch die Bilder bei Vergrößerung überlappt. Jetzt überlappen sie sich nicht mehr, jetzt habe ich aber das Problem, dass ich nur einmal nach rechts sliden kann und mir somit nicht alle Bilder angezeigt werden. Außerdem hab ich irgendwie das Gefühl, dass die Button vertauscht sind, oder?

Edit: Bilder seh ich jetzt alle, nur die Buttons zum sliden sind immer noch vertauscht

 

[martinwolf]

nur die Buttons zum sliden sind immer noch vertauscht

Du meinst die Richtung in die geblättert wird? Das ist bei diesem Modul so gewollt, man hat sich hier an dem "MacOS Scrollen" orientiert, da ist alles spiegelverkehrt. Scrollt man hoch, wandert die Seite nach unten und umgekehrt. Warum auch immer, ich finds furchtbar.

 

[sicktree]

Versuch das hier

.btn-gallery-left {
  right: 0px;
  transform:rotate(180deg);
}
.btn-gallery-right {
  left: 0px;
  transform:rotate(180deg);
}

Für die Funktion left und right beachten ist hier ganz wichtig! Im Original ist das umgekehrt und sorgt für dieses verkehrtherum sliden.
Rotate nimmt das Icon und dreht es einmal grafisch um.

Die bereits vorhandenen Zeilen mit z-index und position bleiben bestehen.

 

[SokuOne]

gäbe es nicht die möglichkeit das scrollen zu ändern damit wäre mir echt geholfen , denn nur die icons zu drehen finde ich dann auch nicht wirklich als schöne lösung

 

[webksde]

Das ist wirklich .. einfach grausam. Gestern schon damit begonnen die jtl.gallery.js selber neu zu implementieren, aber das frisst alles zu viel Zeit, insb. wegen dem korrekten Zusammenspiel mit Varianten. Und das (fast) nur, weil man anständig die Thumbs unten drunter haben möchte. Dann sind da "vertical" CSS Klassen drin, die aber überhaupt nicht genutzt werden, deren Änderung / Entfernung einfach 0 Auswirkung haben. Sonst habt ihr mit dem 4er Shop ja einen tollen Job gemacht.. aber das Ding...

Im 5er Shop wird das dann hoffentlich.. schicker. Einfach zwei synchronisierte Slick Slider zum Beispiel, statt dieser Custom Slider Lösung für die Thumbs und wenn schon custom Lösung..dann doch bitte mit Doku.. was Slick ja schon ausführlich mitgebracht hätte.