0

I want to replace the standard arrows of react-slick with my own arrows, which are (just for testing purposes) png images. I get the images on screen, but they are automatically set to a width and height of 20px. As my png's are 17x27px, my images are distorted. I have tried all sorts of things to change the style, but nothing works. So, how could I change the width and height of my arrow-images?

I am using nextjs. Here is a simplified example 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> )

Adding inline styles or className to the img component does not work for me. Using javascript to change the styles did not work for me.

round_circle
  • 835
  • 1
  • 10
  • 22

1 Answers1

0

You can try adding the width and height attribute to the img tag

<img src="/arrow-left.png" alt="prevArrow" {...props} width='27' height='17'/>
GracjanW
  • 1
  • 1