I'm trying to make an image carousel, and im having issues with getting the slider to move smoothly from the left to right.

I'm trying to achieve a similar slide effect to this, without the dots and all. Just the simple slide effect.

below

https://stackblitz.com/edit/reactcarousel?file=Carousel.js

here is my the current css

style.css

h1,
p {
  font-family: Lato;
}

.wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  overflow: hidden;
}
.box {
  width: 100%;
  padding: 20px;
  overflow: hidden;
}

button {
  height: 40px;
}
.slide {
  width: 100%;
  transform: translateX(-100%);
  background-color: red;
  transition: all 0.43s ease-in;
}
.slide-active {
  width: 100%;
  transform: translateX(0%);
  transition: all 0.43s ease-in;
}

Carousel.js

import React from 'react';
import '../style.css';
export function Carousel({ children, activeSlide, setActiveSlide }) {
  const nextSlide = () => {
    const slides = React.Children.toArray(children);
    if (activeSlide === slides.length - 1) {
      console.log('dsfsfsf');
      setActiveSlide(activeSlide);
    } else {
      setActiveSlide(activeSlide === slides.length - 1 ? 0 : activeSlide + 1);
    }
  };
  const prevSlide = () => {
    if (activeSlide === 0) {
      setActiveSlide(activeSlide);
    } else {
      setActiveSlide(activeSlide - 1);
    }
  };
  return (
    <div class="wrapper">
      <button onClick={prevSlide}>Prev</button>
      <div className="box">
        {React.Children.map(
          children,
          (slide, index) =>
            index === activeSlide && (
              <div className={index === activeSlide ? 'slide-active' : 'slide'}>
                {slide}
              </div>
            )
        )}
      </div>
      <button onClick={nextSlide}>Next</button>
    </div>
  );
}

Demo

https://stackblitz.com/edit/react-ueuthh?file=src%2FCarousel%2FCarousel.jsx