# Tabs auf Detailseite als Slider darstellen

**URL:** <https://forum.shopware.com/t/tabs-auf-detailseite-als-slider-darstellen/107313>\
**Category:** Shopware 6 (German)\
**Created:** [2. Juni 2025 um 08:26 UTC](https://forum.shopware.com/t/tabs-auf-detailseite-als-slider-darstellen/107313 "2025-06-02T08:26:36Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ingenious\_design](https://avatars.discourse-cdn.com/v4/letter/i/db5fbb/32.png) [@ingenious\_design](https://forum.shopware.com/u/ingenious_design)\
**Post date:** [2. Juni 2025 um 08:26 UTC](https://forum.shopware.com/t/tabs-auf-detailseite-als-slider-darstellen/107313/1 "2025-06-02T08:26:36Z")

</div>

Hallo zusammen,  
wir haben unseren Shop von der Version 6.4 auf 6.6 geupdated.  
Auf unserer Produkt-Detailseite haben wir im Template einen Slider eingebunden, bei dem jedoch die Navigationspfeile nicht mehr angezeigt werden. Hier wird der Slider eingebunden:  
**/custom/plugins/TelegymThemeAlt/src/Resources/views/storefront/page/content/product-detail.html.twig**  
{% block page\_product\_detail\_cross\_selling %}  
{% if page.crossSellings.elements is defined and page.crossSellings.elements|filter(item =\> item.total \> 0)|length \> 0 %}

  
{% sw\_include ‚@Storefront/storefront/page/product-detail/cross-selling/tabs.html.twig‘ with {  
crossSellings: page.crossSellings  
} %}  

  
{% endif %}  
{% endblock %}

…und hier das Template und die Config zum Slider:  
**/custom/plugins/TelegymThemeAlt/src/Resources/views/storefront/page/product-detail/cross-selling/tabs.html.twig**

{% sw\_extends ‚@Storefront/storefront/page/product-detail/cross-selling/tabs.html.twig‘ %}

{% block page\_product\_detail\_cross\_selling\_tabs\_inner %}

  
{% for item in crossSellings|filter(item =\> item.total \> 0 and item.crossSelling.active == true) %}  
{% set id = item.crossSelling.id %}  

  
{% set config = {  
‚title‘: {  
‚value‘: item.crossSelling.name  
},  
‚border‘: {  
‚value‘: false  
},  
‚rotate‘: {  
‚value‘: false  
},  
‚products‘: {  
‚value‘: item.getProducts()  
},  
‚boxLayout‘: {  
‚value‘: ‚minimal‘  
},  
‚elMinWidth‘: {  
‚value‘: ‚300px‘  
},  
‚navigation‘: {  
‚value‘: true  
},  
‚displayMode‘: {  
‚value‘: ‚minimal‘  
},  
‚verticalAlign‘: {  
‚value‘: ‚top‘  
}  
} %}

```
            {% sw_include "@Storefront/storefront/element/cms-element-product-slider.html.twig" with {
                sliderConfig: config,
                element: {
                    'data': {
                        'products': {
                            elements: item.getProducts()
                        }
                    },
                    type: 'product-slider'
                }
            } %}
        </div>
    {% endfor %}
</div>

```

{% endblock %}

Hat jemand eine Idee, welche Einstellungen man setzten muss, damit die Pfeile wieder angezeigt werden? Wir haben schon alles mögliche versucht aber kommen zu keinem Ergebnis.

---

<div class="post-metadata">

**Author:** ![UGebhardt](https://avatars.discourse-cdn.com/v4/letter/u/a9adbd/32.png) [@UGebhardt](https://forum.shopware.com/u/UGebhardt)\
**Post date:** [2. Juni 2025 um 08:43 UTC](https://forum.shopware.com/t/tabs-auf-detailseite-als-slider-darstellen/107313/2 "2025-06-02T08:43:42Z")

</div>

Bist Du sicher, dass das Template auch geladen wird? Bei SW 6.6 wird doch auf Produktseiten ein **Layout** angezeigt und nicht mehr die feste Page.  
Also musst Du sicher ein neues Layout anlegen/duplizieren und dort die Navigation im Slider aktivieren.

---

<div class="post-metadata">

**Author:** ![Kavkus](https://avatars.discourse-cdn.com/v4/letter/k/e19b73/32.png) [@Kavkus](https://forum.shopware.com/u/Kavkus)\
**Post date:** [2. Juni 2025 um 08:53 UTC](https://forum.shopware.com/t/tabs-auf-detailseite-als-slider-darstellen/107313/3 "2025-06-02T08:53:10Z")

</div>

Wie mein vorredner schon sagte wurde die produktdetailseite in 6.6 komplett neu aufgebaut. Die findest nun unter component

---

<div class="post-metadata">

**Author:** ![ingenious\_design](https://avatars.discourse-cdn.com/v4/letter/i/db5fbb/32.png) [@ingenious\_design](https://forum.shopware.com/u/ingenious_design)\
**Post date:** [2. Juni 2025 um 09:14 UTC](https://forum.shopware.com/t/tabs-auf-detailseite-als-slider-darstellen/107313/4 "2025-06-02T09:14:56Z")

</div>

Durch das Überschreiben der product-detail.html.twig bauen wir das Layout nicht mittels Erlebniswelt, sondern direkt über das Template.  
Das ist leider nötig, da die Detailseite sehr stark individualisiert wurde.  
Der Slider wird auch angezeigt uns ist interaktiv, jedoch ohne Navigationspfeile.

---

<div class="post-metadata">

**Author:** ![UGebhardt](https://avatars.discourse-cdn.com/v4/letter/u/a9adbd/32.png) [@UGebhardt](https://forum.shopware.com/u/UGebhardt)\
**Post date:** [2. Juni 2025 um 10:04 UTC](https://forum.shopware.com/t/tabs-auf-detailseite-als-slider-darstellen/107313/5 "2025-06-02T10:04:07Z")

</div>

Was steht denn im Frontend in den data-product-slider-options? Und hat der Produktslider die CSS-Klasse has-nav? Und sind genügend Produkte im Slider - also mehr als die sichtbaren?

---

<div class="post-metadata">

**Author:** ![ingenious\_design](https://avatars.discourse-cdn.com/v4/letter/i/db5fbb/32.png) [@ingenious\_design](https://forum.shopware.com/u/ingenious_design)\
**Post date:** [2. Juni 2025 um 10:20 UTC](https://forum.shopware.com/t/tabs-auf-detailseite-als-slider-darstellen/107313/6 "2025-06-02T10:20:24Z")

</div>

**Die product-slider-options sehen so aus:**  
class=„base-slider product-slider has-nav“  
data-product-slider=„true“  
data-product-slider-options=„{"productboxMinWidth":"300px","slider":{"controls":false,"nav":false,"mouseDrag":true,"autoplay":false,"autoplayButtonOutput":false,"autoplayTimeout":null,"speed":null,"ariaLive":true,"gutter":30}}“  
role=„region“  
aria-label=„component.cms.productGallery.ariaLabel“  
tabindex=„0“

Seltsamerweise wird „nav“ auf „false“ gesetzt, obwohl wir das in der Config angeben:

```
            {% set config = {
                'title': {
                    'value': item.crossSelling.name
                },
                'border': {
                    'value': false
                },
                'rotate': {
                    'value': false
                },
                'products': {
                    'value': item.getProducts()
                },
                'boxLayout': {
                    'value': 'minimal'
                },
                'elMinWidth': {
                    'value': '300px'
                },
                'navigation': {
                    'value': true
                },
                'displayMode': {
                    'value': 'minimal'
                },
                'verticalAlign': {
                    'value': 'top'
                }
            } %}

```

---

<div class="post-metadata">

**Author:** ![ingenious\_design](https://avatars.discourse-cdn.com/v4/letter/i/db5fbb/32.png) [@ingenious\_design](https://forum.shopware.com/u/ingenious_design)\
**Post date:** [2. Juni 2025 um 11:05 UTC](https://forum.shopware.com/t/tabs-auf-detailseite-als-slider-darstellen/107313/7 "2025-06-02T11:05:00Z")

</div>

Vielen Dank für die Hilfe, ich konnte es nun lösen. Folgendes musste ergänzt werden:

```
'navigationArrows': {
    'value': 'inside'
},
'speed': {
    'value': 300
}

```

Danke für den Hinweis mit den **data-product-slider-options** , so bin ich nun selbst drauf gekommen 😊

---

<div class="post-metadata">

**Author:** ![system](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/3X/2/9/29c7587ba660f00e4995d1743162782e5d6d8653.svg) [@system](https://forum.shopware.com/u/system)\
**Post date:** [2. Juli 2025 um 11:05 UTC](https://forum.shopware.com/t/tabs-auf-detailseite-als-slider-darstellen/107313/8 "2025-07-02T11:05:32Z")

</div>

Dieses Thema wurde automatisch 30 Tage nach der letzten Antwort geschlossen. Es sind keine neuen Antworten mehr erlaubt.