Recommendations

Sliders

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

Grundlagen #

Clerk.js verfügt über eine integrierte Funktion zum Anzeigen von Produkten mit Slidern. Diese Funktion zeigt eine Reihe von Produkten mit einer Reihe von Pfeilen, die es den Kunden ermöglichen, viele Produkte mit nur wenigen Klicks zu navigieren.

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

Die Slider-Funktionalität ist so programmiert, dass bei jedem Klick eine gesamte neue Reihe von Produkten angezeigt wird, 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 Aussehen anzupassen:

Anzahl der anzuzeigenden Elemente nach Bildschirmgröße
Verschiedene Schaltflächenstile
Position der Pfeile

Code-Designs #

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

<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 Stile #

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

Die neuen Stile können 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.