Estoy tratando de hacer un carrusel de imágenes y tengo problemas para que el control deslizante se mueva suavemente de izquierda a derecha.

Estoy tratando de lograr un efecto de diapositiva similar a este, sin los puntos y todo. Sólo el simple efecto de diapositiva.

abajo

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

aquí está mi css actual

estilo.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; }

Carrusel.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> ); }

Manifestación

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