> For the complete documentation index, see [llms.txt](https://coolbax.gitbook.io/coolbax-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://coolbax.gitbook.io/coolbax-docs/shopware-5-plugins/storefront/variantenbilder-im-listing-als-slider.md).

# Variantenbilder im Listing als Slider

{% embed url="<https://www.youtube.com/watch?v=CvdqD8SZvoM>" %}

## Installation <a href="#installation" id="installation"></a>

Sie können das Plugin über den Shopware Community Store erwerben. Das Plugin wird wie ein ganz gewöhnliches Plugin installiert.&#x20;

{% embed url="<http://store.shopware.com/cbax927656861572/variantenbilder-im-listing-als-slider.html>" %}
Plugin über den Shopware Community Store erwerben
{% endembed %}

Nach der Installation des Plugins öffnet sich die Konfigurationsmaske des Plugins.

## Die Einstellungen des Plugins <a href="#plugin_einstellungen" id="plugin_einstellungen"></a>

Nach der erfolgreichen Installation des Plugins können Sie in der Konfigurationsmaske die Einstellungen vornehmen und weitere Parameter ergänzen.

<figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2FkuaPpkrkIGkfiqMMQuLP%2FSW-VariantenbilderListing-01.jpg?alt=media&amp;token=96d17787-b6cb-4d40-a03a-c2b8805e4326" alt="" width="375"><figcaption></figcaption></figure>

| Feldname                 | Bedeutung                                                                                                                      |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------ |
| Aktiv                    | Das Plugin für den jeweiligen Shop aktivieren oder deaktivieren                                                                |
| Pfeile anzeigen          | Zeigt die Pfeile im Frontend an, damit der Kunde im Frontend manuell durch die Bilder navigieren kann                          |
| Scroll Geschwindigkeit   | Hier stellen Sie die Scroll Geschwindigkeit in "ms" ein, diese Zeit wird gebraucht, um von einem Bild zum nächsten zu wechseln |
| Automatisch Rotieren     | Definiert, ob die Bilder automatisch rotieren oder nicht                                                                       |
| Endlos Rotieren          | Hier legen Sie fest, ob der Slider Endlos rotiert oder beim letzten Bild stehen bleibt                                         |
| Rotation Geschwindigkeit | Dies stellt die Zeit ein, die ein Bild sichtbar bleibt, bevor zum nächsten Bild rotiert wird                                   |
| Maximale Anzahl Bilder   | Die maximale Anzahl der Bilder im Slider. Wenn Sie alle Bilder anzeigen möchten, dann lassen Sie das Feld einfach leer         |

## Responsive - Desktop, Tablet, Smartphone <a href="#darstellung_frontend" id="darstellung_frontend"></a>

Die Anzeige der Variantenbilder im Listing als Slider. Dargestellt auf den verschiedenen Endgeräten.

<div><figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2F5drahst41yqWCHZhfRUp%2FSW-VariantenbilderListing-02.jpg?alt=media&amp;token=923214e8-6703-45a2-8239-5e68516b0779" alt=""><figcaption></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2F1YZvzWI21xTksV5aOh2L%2FSW-VariantenbilderListing-03.jpg?alt=media&amp;token=6728b90a-71e9-4407-8d22-afe384a8abe3" alt="" width="563"><figcaption></figcaption></figure> <figure><img src="https://857504323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIjmVDBFtwlXBYXSv10K6%2Fuploads%2Fa5nphTd5fM8T28CZIKvb%2FSW-VariantenbilderListing-04.jpg?alt=media&amp;token=4a422f14-643d-4f47-afcb-5e9fda9acf5f" alt="" width="563"><figcaption></figcaption></figure></div>

<br>