Recommendations

Sliders

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

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 ein festes “Fenster” von Produkten gleichzeitig angezeigt wird, das mit den Tasten gesteuert wird.

Die Slider-Funktionalität ist so programmiert, dass sie für jeden 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 Aussehen 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 Slider-Pfeile #

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

Das neue Styling 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.