Looking to enhance the look of slick carousels by customizing prev/next arrows and controlling their position? I'm currently using nextjs13, chakra-ui, react-slick, and vanilla extract.
An effective way to customize arrow styles is by passing an arrow component like this:
const settings = {
...
prevArrow: <Arrow />
};
You can also control the arrow's position by applying global CSS 'slick-prev' style. However, if you need different styles for each slider, it becomes tricky.
I attempted to use a vanilla-extract class like this:
export const classname = style({...})
<Slider className={classname} />
But unfortunately, it didn't work as expected since the class name should be 'slick-prev' to override the default style.
Additionally, simply omitting the arrow setting in the settings object did not yield the desired result either.
Another approach I tried was creating a separate CSS file with '.slick-prev' style and importing it into a specific component. However, this modification impacted sliders on other pages as well.
If anyone has a solution on how to specifically override the '.slick-prev' style for a single slider, your input would be greatly appreciated.