Clerk.io's Schieberegler-Pfeile stylen

Prüfen Sie, welche Klassen Sie ändern müssen

Clerk.js verfügt über eine integrierte Funktion zur Anzeige von Produkten mit Schiebereglern.

Diese Funktion verfügt über einen Standardsatz von Pfeilen, mit denen Kunden durch den Schieberegler navigieren können (siehe unten):

Wenn Sie jedoch Ihre eigenen Slider-Pfeile verwenden oder deren Platzierung ändern möchten, können Sie diese Klassen verwenden, um sie zu ändern:

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

Das neue Styling kann in Ihrem bestehenden Stylesheet oder als Teil eines Designs in my.clerk.io. hinzugefügt werden.