Sliders

Clerk.js è dotato di una funzione integrata per mostrare i prodotti con i cursori.

Questa funzione ha una serie di frecce standard che consentono ai clienti di navigare nel cursore, come mostrato di seguito:

Tuttavia, se si desidera utilizzare le proprie frecce di scorrimento o modificarne il posizionamento, è possibile utilizzare queste classi per modificarle:

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

Il nuovo stile può essere aggiunto nel foglio di stile esistente, oppure come parte del Design in my.clerk.io.