Recommendations

Sliders

Gør det nemt for kunderne 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 af produkter med et sæt af pile, der lader kunder navigere mange produkter med kun få klik.

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

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

Designredaktør #

Når du opretter designs med Designredaktøren, kommer skabelon-designene med slider-komponenten forudvalgt.

Slider-komponenten kommer med en række muligheder for at lade dig tilpasse dens udseende:

Antal elementer, der skal vises efter skærmstørrelse
Flere knapstile
Position af pilene

Kodedesigns #

For kodedesigns, 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 }}">Køb nu</a>
      </li>
    {% endfor %}
  </ul>

Tilpassede slider-pile #

Hvis du vil bruge dine egne slider-pile, eller ønsker at æ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 simpelthen 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.