<RBCarousel
    animation={true}
    autoplay={this.state.autoplay}
    slideshowSpeed={3000}
    leftIcon={leftIcon}
    rightIcon={rightIcon}
    onSelect={this.onSelect}
    ref={r => (this.slider = r)}
    version={4}
    indicators={false}
    >
    {
     this.state.images.map((image, index) => (
                          <Slide key={index}
                          src={image} />
                          ))
     }
</RBCarousel>

<CardGroup>
          {
          FeaturesInfo.map((item, index) => {
                return <FeatureCard key={index}
                goToSlide={()=>this.goToSlide(index)}
                icon={require(`../../../Assets/FeaturesImages/${item.icon}`)}
title={item.title} description={item.description} />
            })
           }
</CardGroup>

onSelect = (active, direction) => {
        console.log(`active=${active} && direction=${direction}`);
    };

    slideNext = () => {
        this.slider.slideNext();
    };
    slidePrev = () => {
        this.slider.slidePrev();
    };

    goToSlide = i => {
        this.slider.goToSlide(i);
    };

.FeatureCards:active {
  border-top: 5px solid white;
  background-color: rgba(0, 0, 0, 0.9);
}

goToSlide = i => {
    this.slider.goToSlide(i);
    this.setState({ currentSlide: i });
};

{
 this.state.images.map((image, index) => (
   <Slide key={index}
     // in your slide check is active is true, and add active class.
     active={index === this.state.currentSlide}
     src={image} />
   ))
 }