# Produkt-Slider für mobile

**URL:** <https://forum.shopware.com/t/produkt-slider-fuer-mobile/106813>\
**Category:** Shopware 6 (German)\
**Created:** [23. März 2025 um 09:10 UTC](https://forum.shopware.com/t/produkt-slider-fuer-mobile/106813 "2025-03-23T09:10:30Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![ilargi](https://avatars.discourse-cdn.com/v4/letter/i/e8c25b/32.png) [@ilargi](https://forum.shopware.com/u/ilargi)\
**Post date:** [23. März 2025 um 09:10 UTC](https://forum.shopware.com/t/produkt-slider-fuer-mobile/106813/1 "2025-03-23T09:10:30Z")

</div>

Hallo, ich versuche mein Produkt-Slider für mobile kleine zu machen, aber ich schaffen nicht, ich bekomme immer gleiche Große.

Ich kenne mich nicht über js, aber wie ich verstande habe, ich muss eine Parameter für die Großen…  
In dem Datei **base-slider.plugin.js** und **gallery-slider.plugin.js** befinden sich dieses js. der **responsive** variable, war Leer, ich versuche geben diesen Parametar,

```auto
responsive: {
                xs: {'400px'},
                sm: {'576px'},
                md: {'768px'},
                lg: {'992px'},
                xl: {'1200px'},
                xxl: {'1400px'},

```

Auch in **gallery-slider.plugin.js** Datei `autoHeight: true`hinzufügen, weil nicht war,

```auto
thumbnailSlider: {
            enabled: true,
            loop: false,
            nav: false,
            items: 5,
            gutter: 10,
            startIndex: 1,
            preventScrollOnTouch: 'force',
            ariaLive: false,
            autoHeight: true,
            responsive: {

```

in meine Theme und **app/storefront/src/main.js** Datei, habe,

```auto
<script>
import BaseSliderPlugin from 'src/plugin/slider/gallery-slider.plugin';

  var slider = tns({
    container: '.tns3-ow',
    items: 1,
    responsive: {
      640: {
        edgePadding: 20,
        gutter: 20,
        items: 2
      },
      700: {
        gutter: 30
      },
      900: {
        items: 3
      },
      1200: {
        autoHeight: '5px'
      },
      1400: {
        autoHeight: '5px'
      }  
    }
  });
</script>

```

aber verändert nichts…

---

<div class="post-metadata">

**Author:** ![b.david](https://avatars.discourse-cdn.com/v4/letter/b/3be4f8/32.png) [@b.david](https://forum.shopware.com/u/b.david)\
**Post date:** [23. März 2025 um 14:04 UTC](https://forum.shopware.com/t/produkt-slider-fuer-mobile/106813/2 "2025-03-23T14:04:38Z")

</div>

Hi,  
alleine das einbauen in ein JS File hilft hier tatsächlich nicht du müsstest über die SSH Console dann noch sh bin/build-storefront.sh machen um die JS Files neu zu kompilieren.

Ob das von dir eingebaute funktioniert habe ich jetzt allerdings mir nicht genauer angeschaut. Mir ging es lediglich erstmal darum, dass du die JS Files neu kompilieren musst.

Allerdings, solltest du das ganze auch nicht in den Shopware Dateien machen sondern in deinem Theme erweitern.

---

<div class="post-metadata">

**Author:** ![ilargi](https://avatars.discourse-cdn.com/v4/letter/i/e8c25b/32.png) [@ilargi](https://forum.shopware.com/u/ilargi)\
**Post date:** [23. März 2025 um 14:23 UTC](https://forum.shopware.com/t/produkt-slider-fuer-mobile/106813/3 "2025-03-23T14:23:53Z")

</div>

Viele danke für deinen Anwort!

ich nicht verstehe was meins mit `sh bin/build-storefront.sh ` ich sollte in mein Console schreiebe ?

> Mir ging es lediglich erstmal darum, dass du die JS Files neu kompilieren musst.

Es funzioniert mit Befehl `bin/console theme:compile` ?

> nicht in den Shopware Dateien machen sondern in deinem Theme erweitern.

Ich arbeite mit meinem neue Theme…

---

<div class="post-metadata">

**Author:** ![b.david](https://avatars.discourse-cdn.com/v4/letter/b/3be4f8/32.png) [@b.david](https://forum.shopware.com/u/b.david)\
**Post date:** [24. März 2025 um 08:17 UTC](https://forum.shopware.com/t/produkt-slider-fuer-mobile/106813/4 "2025-03-24T08:17:10Z")

</div>

Genau in die Console schreiben.

Nein-  
bin/console theme:compile ist nur um die scss Dateien zu kompilieren das build-storefront ist für die JS Files.

---

<div class="post-metadata">

**Author:** ![ilargi](https://avatars.discourse-cdn.com/v4/letter/i/e8c25b/32.png) [@ilargi](https://forum.shopware.com/u/ilargi)\
**Post date:** [24. März 2025 um 09:12 UTC](https://forum.shopware.com/t/produkt-slider-fuer-mobile/106813/5 "2025-03-24T09:12:22Z")

</div>

Danke, Mit `bin/build-storefront.sh`  
Bekommt das fehler mit dem Code ,

 ![js](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/0/5/05aeeb405bd8c07c989619fb6109691a313daef8.png)

Wie habe das Code,

```auto
<script>
import BaseSliderPlugin from 'src/plugin/slider/gallery-slider.plugin';

  var slider = tns({
    container: '.tns3-ow',
    items: 1,
    responsive: {
      640: {
        edgePadding: 20,
        gutter: 20,
        items: 2
      },
      700: {
        gutter: 30
      },
      900: {
        items: 3
      },
      1200: {
        autoHeight: '5px'
      },
      1400: {
        autoHeight: '5px'
      }  
    }
  });
</script>

```

---

<div class="post-metadata">

**Author:** ![ilargi](https://avatars.discourse-cdn.com/v4/letter/i/e8c25b/32.png) [@ilargi](https://forum.shopware.com/u/ilargi)\
**Post date:** [24. März 2025 um 13:22 UTC](https://forum.shopware.com/t/produkt-slider-fuer-mobile/106813/6 "2025-03-24T13:22:40Z")

</div>

so, ich habe etwas [hier](https://developer.shopware.com/docs/guides/plugins/plugins/storefront/add-custom-javascript.html) gelesen, ich versuche mache, wie sie sagen…

In **app/storefront/src** habe eine neue ordner gemacht und habe er **neu-slider** gennant, auf diesen Ordner liegt der datei von oben und seine name ist **slider.plugin.js**.

In **app/storefront/src** liegt der Datei **main.js** , in innere dieser Datei jetzt habe,

```auto
// <plugin root>/src/Resources/app/storefront/src/main.js
// Import all necessary Storefront plugins

import sliderPlugin from './neue-slider/slider.plugin';

// Register your plugin via the existing PluginManager
const PluginManager = window.PluginManager;
PluginManager.register('sliderPluging', sliderPluging);

```

Wenn in Terminal schreibe, `bin/build-storefront.sh`

bekommt diesen warnungen,

```auto
 ERROR in ./plugin/slider/base-slider.plugin.js
  Module build failed (from ../node_modules/swc-loader/src/index.js):
  Error: 
    × Expected a semicolon
      ╭─[/var/www/html/shopware/vendor/shopware/storefront/Resources/app/storefront/src/plugin/slider/base-slider.plugin.js:11:1]
   11 │ slider: {
   12 │ enabled: true,
   13 │ responsive: {
   14 │ xs: {400},
      · ─
   15 │ sm: {576},
   16 │ md: {768},
   17 │ lg: {992},
      ╰────

    × Expected a semicolon
      ╭─[/var/www/html/shopware/vendor/shopware/storefront/Resources/app/storefront/src/plugin/slider/base-slider.plugin.js:12:1]
.....

```

Sagen das die Code in der Datei **gallery-slider.plugin.js** , der,

```auto
slider: {
            preventScrollOnTouch: 'auto',
            startIndex: 1,
            responsive: {
                xs: {400},
                sm: {576},
                md: {768},
                lg: {992},
                xl: {1200},
                xxl: {1400},
            },

```

die endungen mit semicolon schreibe soll,

```auto
slider: {
            preventScrollOnTouch: 'auto',
            startIndex: 1,
            responsive: {
                xs: {400};
                sm: {576};
                md: {768};
                lg: {992};
                xl: {1200};
                xxl: {1400};
            },

```

aber mache dieses, geben dieses Warnungen

> × Expected ‚,‘, got ‚;‘

---

<div class="post-metadata">

**Author:** ![ilargi](https://avatars.discourse-cdn.com/v4/letter/i/e8c25b/32.png) [@ilargi](https://forum.shopware.com/u/ilargi)\
**Post date:** [25. März 2025 um 13:22 UTC](https://forum.shopware.com/t/produkt-slider-fuer-mobile/106813/7 "2025-03-25T13:22:30Z")

</div>

So, jetzt bekommt keine Fehler mehr, das Probleme war in **base-slider.plugin.js** und **gallery-slider.plugin.js** dateien, ich sollte die **Eckige Klammern** Leer und mit dem Koma,

```auto
responsive: {
                xs: {},
                sm: {},
                md: {},
                lg: {},
                xl: {},
                xxl: {}

```

das Probleme ist jetzt was auf der Java Code wird nicht gerufen…

In meine **main.js** habe,

```auto
// <plugin root>/src/Resources/app/storefront/src/main.js
// Import all necessary Storefront plugins

import sliderPlugin from './neue-slider/slider.plugin';

// Register your plugin via the existing PluginManager
const PluginManager = window.PluginManager;
PluginManager.register('sliderPlugin', sliderPlugin);

```

und in meine **slider.plugin.js**

```auto
import BaseSliderPlugin from 'src/plugin/slider/base-slider.plugin';
import { tns } from "./node_modules/tiny-slider/src/tiny-slider";

var slider = tns({
      container: '.tns',
      items: 1,
      autoHeight: true,
      responsive: {
      640: {
        edgePadding: 20,
        gutter: 20,
        items: 2
      },
      700: {
        gutter: 30
      },
      900: {
        items: 3
      }  
} });

```

Das Fenster von Produkt-Slider in Breite, ist zu Groß..

 ![fenster](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/2/8/28e3f5490cfcb2aea495c57b5c1696ca4c5c7600.png)

---

<div class="post-metadata">

**Author:** ![ilargi](https://avatars.discourse-cdn.com/v4/letter/i/e8c25b/32.png) [@ilargi](https://forum.shopware.com/u/ilargi)\
**Post date:** [25. März 2025 um 17:09 UTC](https://forum.shopware.com/t/produkt-slider-fuer-mobile/106813/8 "2025-03-25T17:09:47Z")

</div>

Kann jemand hilfe dieser Probleme für 50 Euros ?

---

<div class="post-metadata">

**Author:** ![Max\_Shop](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Max\_Shop](https://forum.shopware.com/u/Max_Shop)\
**Post date:** [25. März 2025 um 17:20 UTC](https://forum.shopware.com/t/produkt-slider-fuer-mobile/106813/9 "2025-03-25T17:20:06Z")

</div>

Was meinst du denn mit „kleiner machen“? Wenn du im CMS bist, dann kannst du über das Zahnrad eine Pixelanzahl angeben. Setzte diese von 300 (bzw. den Standardwert) auf bspw. 200. Dann sind die Bilder kleiner.

Wenn es nur für Mobile kleiner sein soll, dann schau, wo dieser Wert verwendet wird und passe das CSS entsprechend an.

---

<div class="post-metadata">

**Author:** ![ilargi](https://avatars.discourse-cdn.com/v4/letter/i/e8c25b/32.png) [@ilargi](https://forum.shopware.com/u/ilargi)\
**Post date:** [25. März 2025 um 18:54 UTC](https://forum.shopware.com/t/produkt-slider-fuer-mobile/106813/10 "2025-03-25T18:54:52Z")

</div>

Danke für deine antwort,

> Was meinst du denn mit „kleiner machen“?

alles was auf dem Fenster ist, Bilder und Preise und Artikel Titel.

 ![kleine](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/a/2/a26042e55122a917e5de5aae170d178d50ba6a1b.png)

Beispiel mit diesen Code, habe geschafft ganze Fenster(Bilder und Preis), kleine zu machen,

```auto
div.product-box.box-image .product-image-wrapper { height: 150px;}

```

in Smartphone Lange…

Aber diesen Code nicht funzioniert in Breite ,

 ![größer](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/6/1/611c3d71a04428408591cbeced762c842e1d2b43.png)

Beiden Bilder sind von iPhone 12/13.

Was ich versuche ganze Bilder Fenster, kleine zu machen, ich möchte das sie aussiehst wie dieses Bild,

 ![möchte](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/9/0/90072d2161f11ad22cdbe00728b32608345090b8.png)

---

<div class="post-metadata">

**Author:** ![ilargi](https://avatars.discourse-cdn.com/v4/letter/i/e8c25b/32.png) [@ilargi](https://forum.shopware.com/u/ilargi)\
**Post date:** [26. März 2025 um 13:48 UTC](https://forum.shopware.com/t/produkt-slider-fuer-mobile/106813/11 "2025-03-26T13:48:44Z")

</div>

Weil das Fenster zu viele Elemente/Items hat, das macht das Fenster zu lange.

[Hier](https://forum.shopware.com/t/produkt-slider-mobile-darstellung-rebuild/93495) gibt es eine Lösung für meinen Probleme, aber ich weiss nicht dieses zu implementiere..

---

<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:** [27. März 2025 um 07:57 UTC](https://forum.shopware.com/t/produkt-slider-fuer-mobile/106813/12 "2025-03-27T07:57:22Z")

</div>

Hallo,

hier der komplette JavaScript Code, den Du einbinden musst:

```javascript
// DOMContentLoaded bedeutet, dass der Content komplett geladen wurde
document.addEventListener("DOMContentLoaded", function() {
    // Das Timeout wird benötigt, 
    // da es ohne ein Timing-Fehler gibt und das Event zu früh gestartet wird
    setTimeout(function (){
        // Event triggern, damit der Slider initial besser aussieht
        document.dispatchEvent(new Event('Viewport/hasChanged'));
    }, 500);
});

```

Wo du das JavaScript hinterlegst, kann ich dir nicht sagen. Es gibt Themes, die es erlauben zusätzliches JavaScript in deine Seiten einzubinden. Wenn Du aber ein selbst erstelltes, individuelles Theme hast, musst Du dich darum selbst kümmern.

Das ganze wird hier sehr gut erklärt:

> **[Add Custom Javascript | Shopware Documentation](https://developer.shopware.com/docs/guides/plugins/plugins/storefront/add-custom-javascript.html)**
>
> Documentation for Shopware developers

PS: Der folgende Code war nur Beispielcode, der nicht funktioniert. Bitte nicht einbinden und ignorieren:

```javascript
// Nicht verwenden: 
$(window).trigger('resize');
// Nicht verwenden: 
window.dispatchEvent(new Event('resize'));

```

Viele liebe Grüße

Steve