I am struggling to customize the arrows in react-slick with my own PNG images. Despite my efforts, the images appear distorted on the screen as they are automatically set to a width and height of 20px instead of their actual size of 17x27px. I have experimented with various solutions to adjust the styling, but none have been successful so far. How can I successfully change the width and height of my arrow-images?
I am currently working with nextjs. Here is a concise representation of my react slick slider component:
function TeamCarousel() {
const SlickArrowLeft = ({ currentSlide, slideCount, ...props }) => (
<img src="/arrow-left.png" alt="prevArrow" {...props} />
);
const SlickArrowRight = ({ currentSlide, slideCount, ...props }) => (
<img src="/arrow-right.png" alt="nextArrow" {...props} />
);
const settings = {
dots: false,
infinite: true,
speed: 200,
slidesToShow: 3,
slidesToScroll: 1,
centerMode: true,
arrows: true,
beforeChange: (current, next) => handleChangeBefore(current, next),
afterChange: (index) => handleChangeAfter(),
prevArrow: <SlickArrowLeft />,
nextArrow: <SlickArrowRight />,
};
return ( <Slider {...settings} ref={slider}> [etc.] </Slider> )
Despite attempting inline styles and classNames, I have not been able to modify the image components. Even using JavaScript to manipulate the styles has yielded unsatisfactory results.