Recommendations

Sliders

Gør det nemt for kunder at se flere produkter med færre klik

Grundlæggende #

Clerk.js leveres med en indbygget funktion til at vise produkter med sliders. Denne funktion viser en række produkter med et sæt pile, som gør det muligt for kunder at navigere mellem mange produkter med blot et par klik.

Det fungerer grundlæggende ved at oprette en lang, horisontal liste over produkter, og dernæst vise et fast “vindue” af produkter ad gangen, som styres med knapperne.

Slider-funktionaliteten er kodet, så der vises en hel ny række produkter for hvert klik, for at vise så mange nye produkter som muligt med så få klik som muligt.

Design Editor #

Når du opretter designs med Design Editor, kommer skabelondesignene med slider-komponenten forudvalgt.

Slider-komponenten leveres med en række muligheder, så du kan tilpasse dens udseende:

Antal elementer der vises pr. skærmstørrelse
Flere knap-stilarter
Position af pilene

Kode Designs #

For kode designs, vil tilføjelsen af klassen clerk-slider i containeren, vise designet som en slider:

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

Tilpassede slider-pile #

Hvis du vil bruge dine egne slider-pile eller ændre deres placering, kan du tilføje CSS til nedenstående klasser.

Den nye styling kan tilføjes som en del af Design i my.clerk.io. eller blot i dit eksisterende stylesheet.

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

Denne side er oversat af en hjælpsom AI, og der kan derfor være sproglige fejl. Tak for forståelsen.