Recommendations

Sliders

Erleichtern Sie es den Kunden, mehr Produkte mit weniger Klicks zu sehen.
Slider

Grundlagen #

Clerk.js kommt mit einer integrierten Funktion zum Anzeigen von Produkten mit Slidern. Diese Funktion zeigt eine Reihe von Produkten mit einem Satz von Pfeilen, die es den Kunden ermöglichen, viele Produkte mit nur wenigen Klicks zu navigieren.

Es funktioniert im Grunde genommen, indem eine lange, horizontale Liste von Produkten erstellt wird, und dann ein festes “Fenster” von Produkten gleichzeitig angezeigt wird, das mit den Tasten gesteuert wird.

Die Slider-Funktionalität ist so programmiert, dass sie bei jedem Klick eine ganze neue Reihe von Produkten anzeigt, um so viele neue Produkte wie möglich mit so wenigen Klicks wie möglich zu zeigen.

Design-Editor #

Beim Erstellen von Designs mit dem Design-Editor sind die Vorlagen-Designs mit der Slider-Komponente vorab ausgewählt.

Die Slider-Komponente bietet eine Reihe von Optionen, um ihr Erscheinungsbild anzupassen:

  • Anzahl der anzuzeigenden Artikel nach Bildschirmgröße
  • Verschiedene Schaltflächenstile
  • Position der Pfeile
Design Editor Slider

Code-Designs #

Für Code-Designs wird das Hinzufügen der Klasse clerk-slider im Container das Design als Slider anzeigen:

<ul class="product-list clerk-slider">
    {% for product in products %}
      <li class="product">
        <h2 class="product-name">{{ product.name }}</h2>
 
        <img src="{{ product.image }}" title="{{ product.name }}" />
 
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Jetzt kaufen</a>
      </li>
    {% endfor %}
  </ul>

Benutzerdefinierte Gestaltung #

Wenn Sie Ihre eigenen Slider-Pfeile verwenden oder deren Platzierung ändern möchten, können Sie CSS zu den folgenden Klassen hinzufügen.

Die neue Gestaltung kann als Teil des Designs in my.clerk.io. oder einfach in Ihrem bestehenden Stylesheet hinzugefügt werden.

<style type="text/css">
    @keyframes arrowPop {
        0% {
            width: 20%;
        }
        50% {
            width: 0%;
        }
        100% {
            width: 20%;
        }
    }

    .clerk-slider-nav {
        background: #333;
        border-radius:50%;
        display:flex;
        justify-content:center;
        align-items:center;
        font-size:0;
        opacity:0.8;
        filter: drop-shadow(0 0 5px #333);
        transition:0.3s ease;
    }

    .clerk-slider-nav:hover {
        opacity:1;
        transition:0.3s ease;
    }
    .clerk-slider-nav:hover:before {
        animation:arrowPop 0.3s ease;
    }
    .clerk-slider-nav-next {
        flex-direction:row-reverse;
    }

    .clerk-slider-nav:after {
        content:"";
        display:block;
        height:40%;
        width:40%;
        transform: rotate(45deg);
        border: solid white;
    }
    .clerk-slider-nav-prev:after {
        border-width: 0px 0px 2px 2px;
    }

    .clerk-slider-nav-next:after {
        border-width: 2px 2px 0px 0px;
    }

    .clerk-slider-nav:before {
        content:"";
        width:20%;
    }
</style>

Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.