# Thumbnail Slider horizontal ab V5.5

**URL:** <https://forum.shopware.com/t/thumbnail-slider-horizontal-ab-v5-5/63681>\
**Category:** Shopware 5\
**Created:** [23. Dezember 2019 um 15:12 UTC](https://forum.shopware.com/t/thumbnail-slider-horizontal-ab-v5-5/63681 "2019-12-23T15:12:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![metscher](https://avatars.discourse-cdn.com/v4/letter/m/7bcc69/32.png) [@metscher](https://forum.shopware.com/u/metscher)\
**Post date:** [23. Dezember 2019 um 15:12 UTC](https://forum.shopware.com/t/thumbnail-slider-horizontal-ab-v5-5/63681/1 "2019-12-23T15:12:07Z")

</div>

Hallo liebe Community,

Meine Frage ist ob es ab der Shopware Version 5.5 noch möglich ist einen Thumbnail Slider (Detail Seite) horizontal in der Desktopansicht zu bauen. Die einzige Möglichkeit, die ich herausgefunden habe, wäre eine kleine Änderung an der Datei: „themes/Frontend/Responsive/frontend/\_public/src/js/jquery.image-slider.js“

Mein Problem ist, man kann es zwar so bauen, aber der rechte Pfeil wird trotzdem immer angezeigt.

Ich habe keine weiteren Änderungen gemacht, außer folgende: (nur CSS) =\> (habe keine Viewports benutzt in dem Beispiel, da es nur zur Demo ist):

```
.product--image-container {
  .image-slider--container {
    margin-bottom: 6.875rem;
  }

  .image-slider--thumbnails {
    position: absolute;
    top: 27.5rem;
    left: 0;
    width: 100%;
    height: 70px;

    .image-slider--thumbnails-slide {
      .thumbnail--link {
        display: inline-block;
        margin: 0 10px 0;
      }
    }
  }
}

.image--dots {
  display: none !important;
}

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![NextMike](https://avatars.discourse-cdn.com/v4/letter/n/838e76/32.png) [@NextMike](https://forum.shopware.com/u/NextMike)\
**Post date:** [24. Dezember 2019 um 09:56 UTC](https://forum.shopware.com/t/thumbnail-slider-horizontal-ab-v5-5/63681/2 "2019-12-24T09:56:35Z")

</div>

Du hast dem .image-slider–thumbnails width: 100%; und dem&nbsp;.thumbnail–link display: inline-block; gegeben. Damit haben die Thumbnails Platz und laufen nebeneinander, das passt schon mal.

Du müsstest allerdings entweder mit JavaScript oder im .tpl die Reihenfolge von „image-slider–container“ und „image–thumbnails image-slider–thumbnails“ vertauschen, damit die Thumbnails unter dem Artikelbild landen.

Um das machen zu können, arbeite Dich am besten hier ein:&nbsp;[https://developers.shopware.com/theme-guide/](https://developers.shopware.com/theme-guide/)

---

<div class="post-metadata">

**Author:** ![metscher](https://avatars.discourse-cdn.com/v4/letter/m/7bcc69/32.png) [@metscher](https://forum.shopware.com/u/metscher)\
**Post date:** [6. Januar 2020 um 07:31 UTC](https://forum.shopware.com/t/thumbnail-slider-horizontal-ab-v5-5/63681/3 "2020-01-06T07:31:00Z")

</div>

> [@NextMike schrieb:](https://forum.shopware.com/profile/19433/NextMike "NextMike")
> 
> Du hast dem .image-slider–thumbnails width: 100%; und dem&nbsp;.thumbnail–link display: inline-block; gegeben. Damit haben die Thumbnails Platz und laufen nebeneinander, das passt schon mal.
> 
> Du müsstest allerdings entweder mit JavaScript oder im .tpl die Reihenfolge von „image-slider–container“ und „image–thumbnails image-slider–thumbnails“ vertauschen, damit die Thumbnails unter dem Artikelbild landen.
> 
> Um das machen zu können, arbeite Dich am besten hier ein:&nbsp;[https://developers.shopware.com/theme-guide/](https://developers.shopware.com/theme-guide/)

Hey, danke schonmal für die Antwort. Das tauschen in der TPL-Datei habe ich bereits probiert, ändert aber garnichts. Ich habe die oben beschriebenen Änderungen bereits in älteren Versionen (Versionen unter SW 5.5) gemacht und dort greifen diese. Ich habe bis jetzt leider noch nicht herausfinden können, was sich von SW 5.4.6 auf SW 5 geändert hat

---

<div class="post-metadata">

**Author:** ![Shopwareianer](https://avatars.discourse-cdn.com/v4/letter/s/b4bc9f/32.png) [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)\
**Post date:** [6. Januar 2020 um 07:36 UTC](https://forum.shopware.com/t/thumbnail-slider-horizontal-ab-v5-5/63681/4 "2020-01-06T07:36:04Z")

</div>

Ohne die Seite / Code zu sehen kann man nur logischerweise nur raten.

Hier geht alles über, du brauchst theoretisch gesehen nichts in der JS anzupassen oder zu überschreiben.&nbsp;CSS. Bspw. CSS Grid, Flexbox mit order usw.

---

<div class="post-metadata">

**Author:** ![metscher](https://avatars.discourse-cdn.com/v4/letter/m/7bcc69/32.png) [@metscher](https://forum.shopware.com/u/metscher)\
**Post date:** [6. Januar 2020 um 08:58 UTC](https://forum.shopware.com/t/thumbnail-slider-horizontal-ab-v5-5/63681/5 "2020-01-06T08:58:24Z")

</div>

> [@Shopwareianer schrieb:](https://forum.shopware.com/profile/15489/Shopwareianer "Shopwareianer")
> 
> Ohne die Seite / Code zu sehen kann man nur logischerweise nur raten.
> 
> Hier geht alles über, du brauchst theoretisch gesehen nichts in der JS anzupassen oder zu überschreiben.&nbsp;CSS. Bspw. CSS Grid, Flexbox mit order usw.

Hey, ehrlich gesagt hab ich dein Kommentar nicht ganz verstanden. Falls dich das weiter bringt, ich habe vor diesem&nbsp;Forum Post einen SW 5.4.6 Shop aufgesetzt und die einzige Änderung (CSS -\> oben beschrieben) dort gemacht. In der SW 5.4.6 funktioniert diese Änderung noch, aber als ich diesen geupdatet habe auf die SW 5.5.0 funktionierte diese nicht mehr. Der Code ist oben beschrieben & der Shop ist ansonsten SW Standard