Clerk.js comes with a built-in function for showing products with sliders. 

This function has a standard set of arrows, that lets customers navigate the slider as shown below:

However, if you want to use your own slider-arrows, or want to change their placement, you can use these classes, to modify them:

<style type="text/css">
    .clerk-slider-nav {
background-image:url("INSERT_GRAPHIC_IMAGE_URL");
        width: 59px;
        height: 59px;
    }
    .clerk-slider-nav-next:hover{
        background-position: 0px -176px;
        left: 645px;
    }
    .clerk-slider-nav-prev:hover{
        background-position: 0px -59px;
        left: -2px;
    }
    .clerk-slider-nav-next{
        background-position:0px -117px;
        left: 645px;
    }
    .clerk-slider-nav-prev{
        background-position:0px 0px;
        left: -2px;
</style>

The new styling can be added in your existing stylesheet, or as part of a Design in my.clerk.io. 

Did this answer your question?