Sliders

Clerk.js har en indbygget funktion til at vise produkter med slidere.

Denne funktion har et standardsæt af pile, som giver kunderne mulighed for at navigere i slideren som vist nedenfor:

Men hvis du vil bruge dine egne slider-pile eller vil ændre deres placering, kan du bruge disse klasser til at ændre dem:

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

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