# Produkt-Slider mobile Darstellung - rebuild

**URL:** <https://forum.shopware.com/t/produkt-slider-mobile-darstellung-rebuild/93495>\
**Category:** Shopware 6 (German)\
**Created:** [16. März 2022 um 09:57 UTC](https://forum.shopware.com/t/produkt-slider-mobile-darstellung-rebuild/93495 "2022-03-16T09:57:01Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Donnar](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/donnar/32/12917_2.png) [@Donnar](https://forum.shopware.com/u/Donnar)\
**Post date:** [16. März 2022 um 09:57 UTC](https://forum.shopware.com/t/produkt-slider-mobile-darstellung-rebuild/93495/1 "2022-03-16T09:57:01Z")

</div>

Hallo liebe community,

wir haben seit geraumer Zeit das Problem, dass die mobile Darstellung des Produktsliders fehlerhaft ist. Es werden mobil zu viele Elemente/Items angezeigt und wenn man die Navigation benutzt, werden zu viele Elemente/Items geswiped.

Seltsamerweise wird nach einer Änderung der Auflösung im Browser der Swiper korrekt gesetzt (Window Resize). Es liegt hier also nur ein Fehler bei der Initialisierung vor. Ich habe schon versucht, diverse resize Events per Javascript anzustoßen, aber alle waren ohne Erfolg:

```auto
// per jQuery
$(window).trigger('resize');
// per modern dispatch
window.dispatchEvent(new Event('resize'));

```

Im Quelltext findet befindet sich hier das Basis-Slider Javascript: Resources/app/storefront/src/plugin/slider/base-slider.plugin.js

Leider weiß ich nicht, wie ich nachfolgende Zeile triggern kann:

```auto
document.addEventListener('Viewport/hasChanged', () => this.rebuild(ViewportDetection.getCurrentViewport()));

```

Zur Frage:  
**Hat jemand einen Tip, wie man den Slider manuell reinitialisieren kann, damit die Darstellung auf Mobilgeräten korrekt ist (rebuild)? Oder wie kann ich das Event aus dem Codebeispiel triggern?**

Man kann sich das ganze hier anschauen:

> **[Shop](https://shop.morerawfood.de/)**

Der Slider befindet sich auf der Homepage direkt unter " Topsellers"

PS:  
Folgende Codezeile führt ebenfalls nicht zum Ziel:

```auto
window.dispatchEvent(new Event('Viewport/hasChanged'));

```

---

<div class="post-metadata">

**Author:** ![Donnar](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/donnar/32/12917_2.png) [@Donnar](https://forum.shopware.com/u/Donnar)\
**Post date:** [22. März 2022 um 13:50 UTC](https://forum.shopware.com/t/produkt-slider-mobile-darstellung-rebuild/93495/2 "2022-03-22T13:50:30Z")

</div>

Bin ich der einzige, der das Problem mit den Produktslidern auf Mobilgeräten hat?

---

<div class="post-metadata">

**Author:** ![Donnar](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/donnar/32/12917_2.png) [@Donnar](https://forum.shopware.com/u/Donnar)\
**Post date:** [22. April 2022 um 08:20 UTC](https://forum.shopware.com/t/produkt-slider-mobile-darstellung-rebuild/93495/3 "2022-04-22T08:20:21Z")

</div>

Ok, ich war blind. Lösung:

```auto
document.dispatchEvent(new Event('Viewport/hasChanged'));

```

und nicht

```auto
window.dispatchEvent(new Event('Viewport/hasChanged'));

```