Estilo de las flechas deslizantes de Clerk.io

Compruebe qué clases debe modificar

Clerk.js viene con una función incorporada para mostrar productos con deslizadores.

Esta función tiene un conjunto estándar de flechas, que permite a los clientes navegar por el control deslizante como se muestra a continuación:

Sin embargo, si desea utilizar su propio slider-flechas, o desea cambiar su colocación, puede utilizar estas clases, para modificarlos:

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

El nuevo estilo se puede añadir en su hoja de estilo existente, o como parte de un Diseño en my.clerk.io.