Recommendations

Sliders

Machen Sie es Kunden einfach, mehr Produkte mit weniger Klicks zu sehen

Grundlagen #

Clerk.js verfügt über eine integrierte Funktion zur Anzeige von Produkten mit Slidern. Diese Funktion zeigt eine Reihe von Produkten mit Pfeilen an, mit denen Kunden viele Produkte mit nur wenigen Klicks durchblättern können.

Im Grunde funktioniert es, indem eine lange, horizontale Liste von Produkten erstellt wird und dann jeweils ein festes “Fenster” von Produkten angezeigt wird, das mit den Buttons gesteuert wird.

Die Slider-Funktionalität ist so programmiert, dass bei jedem Klick eine komplett 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 Template-Designs bereits mit der Slider-Komponente vorausgewählt.

Die Slider-Komponente bietet verschiedene Optionen, um ihr Erscheinungsbild anzupassen:

Menge der angezeigten Artikel je nach Bildschirmgröße
Verschiedene Button-Stile
Position der Pfeile

Code Designs #

Für code designs sorgt das Hinzufügen der Klasse clerk-slider im Container dafür, dass das Design als Slider angezeigt wird:

<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 }}">Buy Now</a>
      </li>
    {% endfor %}
  </ul>

Eigene Slider-Pfeile #

Wenn Sie eigene Slider-Pfeile verwenden oder deren Position ä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.