change react-slick slider Dots icon dynamically with user preference in React

Question

Hi I have some customize using react-slick slider.

I have two png dot icons and it can be changed dynamically ( user can change from admin section and return front end as API data)

../navigator.png 
and 
../navigator-active.png

    sliderSettings = {
      dots: true,
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      appendDots: dots => {
        return <ul style={{ margin: '0px' }}>{dots}</ul>;
      },
      customPaging: (pagi, i) => {
        const style = {
            width: 13,
            height: 13,
            display: 'inline-block',
            backgroundImage: `url(../navigator.png )`, // need to change as navigator-active.png this when active
            backgroundSize: 'contain',
            backgroundRepeat: 'no-repeat',
        };
        return <a className="slick-dot" style={style} />;
      },
  };

Is that possible to way add an active icon, need to change default dot icon to active dot icon

Answer 1

You can try this, just record the current silde index using setState, and change the style according to it.

 render() {
    var settings = {
      dots: true,
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      appendDots: dots => {
        return <ul style={{ margin: "0px" }}>{dots}</ul>;
      },
      beforeChange: (prev, next) => {   // here to detect slide change
        this.setState({ currentSlideIndex: next });
      },
      customPaging: (pagi, i) => {
        const style = {
          width: 13,
          height: 13,
          display: "inline-block",
          backgroundImage: `url(../navigator.png )`, // need to change as navigator-active.png this when active
          backgroundSize: 'contain',
          backgroundRepeat: "no-repeat"
        };
        const activeStyle = {
          width: 13,
          height: 13,
          display: "inline-block",
          backgroundImage: `url(../navigator-active.png )`,
          backgroundSize: 'contain',
          backgroundRepeat: "no-repeat"
        };
        return (
          <a
            className="slick-dot"
            style={pagi === this.state.currentSlideIndex ? activeStyle : style}
          />
        );
      }
    };