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.