Que es react-image-gallery
https://linxtion.com/demo/react-image-gallery/
Creación del proyecto
npm create vite react-image-gallery-demo -- --template react
cd react-image-gallery-demo
npm install
npm run dev
npm install react-image-gallery
import ImageGallery from "react-image-gallery";
import "react-image-gallery/styles/css/image-gallery.css";
function App() {
const images = [
{
original: "https://picsum.photos/id/1018/1000/600/",
thumbnail: "https://picsum.photos/id/1018/250/150/",
},
{
original: "https://picsum.photos/id/1015/1000/600/",
thumbnail: "https://picsum.photos/id/1015/250/150/",
},
{
original: "https://picsum.photos/id/1019/1000/600/",
thumbnail: "https://picsum.photos/id/1019/250/150/",
},
];
return (
<div>
<ImageGallery items={images} />
</div>
);
}
export default App;
usando el elemento que lo contiene puedes controlar el tamaño del Slider:
<div style={{ width: "100vw" }}>
<ImageGallery items={images} />
</div>
Opciones de Image Gallery
<ImageGallery
items={images}
showPlayButton={false}
showFullscreenButton={false}
showThumbnails={false}
showNav={false}
showBullets={false}
autoPlay={true}
slideInterval={200}
slideDuration={1000}
/>