Easy way to change arrow color ? Not the background color

[foodaka]

I want to change the inner arrow color. In the demo the browser has the css as

font-size: 20px;
    line-height: 1;
    color: #00558B;
    opacity: .75;

how do i replicate this? Is there an easy way to change this color property? I have no issue with custom arrow changing background, but i only want to change arrow color.

https://jsfiddle.net/9raxke45/

Cheers!

[radiovisual]

Just target the button's contents directly like this:

.slick-prev:before,
.slick-next:before {
  color: yellow;
}

https://jsfiddle.net/ss6LedtL/

[foodaka]

Ah thanks for the quick response :)

[mostafahamed15]

@radiovisual When i add style to component directly dosenot work and when but it in styles in assets folder it work thanks a lot

[avicrayyy]

If you want to change the component directly without changing anything in slick.css, you can add !important next to the color like this:

.slick-prev:before,
.slick-next:before {
  color: red!important;
}

[Nageswaran-1997]

which place include this? like my style.css or nodemodules ?

[avicrayyy]

Try adding it to style.css

[aishwarya88]

@ieatcrayolaaa sorry but it not working directly any other way to solve this issue

[mazer-rakham]

This is incorrect when using react and typescript. You have to make an override stylesheet, CSS, not SCSS and include that to over write the styles. import './YourCss.css'

and then you can over ride the default styling.

[fujianjin6471]

If you want to change the component directly without changing anything in slick.css, you can add !important next to the color like this:

.slick-prev:before,
.slick-next:before {
  color: red!important;
}

!important is really important!

[tech-colab]

hi there, what about change color of the arrow when we set (infinite:false) (so the slide will come to an end)

[AbhaySingh5349]

Checkout my answer on custom Slider Carousel on stack overflow for React: https://stackoverflow.com/a/77772400/13775244

npm install --save react-slick @types/react-slick slick-carousel

import Slider from 'react-slick';

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

const ImageCorouselSlider = ({ images }: any) => {
  const CustomPrevArrow = (props: any) => (
    <div
      className="slick-arrow slick-prev"
      onClick={props.onClick}
      style={{ color: 'CUSTOM_ARROW_COLOR' }}
    >
      {/* Your custom left arrow icon or content */}
      {/* Example: add SVG */}
    </div>
  );

  const CustomNextArrow = (props: any) => (
    <div
      className="slick-arrow slick-next"
      onClick={props.onClick}
      style={{ color: 'CUSTOM_ARROW_COLOR' }}
    >
      {/* Your custom right arrow icon or content */}
      {/* Example: add SVG */}
    </div>
  );

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    prevArrow: <CustomPrevArrow />,
    nextArrow: <CustomNextArrow />,
  };

  return (
    <>
      <Slider {...settings}>
        {images.map((image) => (
          <img
              src={YOUR_IMAGE_SOURCE}
              alt={IMAGE_ALT_VAL}
          />
        ))}
      </Slider>
    </>
  );
};

export default ImageCorouselSlider;