Descargo de responsabilidad: primer proyecto de reacción, estoy creando un portafolio de fotografías y creo que la parte más difícil sería la galería de imágenes real.

Estoy tratando de hacer una sección con varios niños que tenga una colección de fotos. Quiero que cada sección se desplace horizontalmente de forma independiente, pero todo lo que he intentado hace que toda la sección se desplace. Estoy seguro de que es algo simple porque he hecho proyectos antes con una funcionalidad similar, pero eso fue solo cuando estaba usando HTML, JS, CSS.

Componente de galería

 import React, { useEffect, useState } from 'react' import Styles from './styles' const Photo = (props) => { return ( <div id={props.id + '_container'} style={Styles.PhotoContStyle}> <img id={props.id} src={props.url} style={Styles.PhotoStyle} /> </div> ) } const AlbumArr = (props) => { const [ImgArr, setImgArr] = useState() useEffect(() => { setImgArr(props.album.urlArr .filter(img => img.url.includes('.jpg')) .map(({ url, name }) => { let urlModified = url.replace('.jpg', '.webp').slice(0, 46) + 'w_720/' + url.replace('.jpg', '.webp').slice(46) return <Photo key={name} url={urlModified} id={name + '_Photo'} /> })) }, []) return ( <div id={'AlbumArr_' + props.album.albumName} style={Styles.AlbumArrStyle}> {ImgArr} </div> ) } const Gallery = (props) => { const [Albums, setAlbums] = useState([]) useEffect(() => { fetch('http://localhost:3000/photos/') .then(res => res.json()) .then(data => { setAlbums(data) }).catch((err) => console.log(err)) }, []) return ( <div id='Gallery' style={Styles.GalleryStyle}> {Albums.map((album) => { return <AlbumArr album={album} key={album.albumName} /> })} </div> ) } export default Gallery

CSS

 const Styles = { ContStyle: { width: '100vw', height: 'inherit', }, GalleryStyle: { display: 'flex', flexDirection: 'column', justifyContent: 'center', width: '100vw', height: '100%', }, AlbumArrStyle: { display: 'flex', flexDirection: 'row', width: 'max-content', height: '75vh', margin: '8px', }, PhotoContStyle: { height: '100%', width: 'max-content', margin: '0 8px', overflow: 'clip', borderRadius: '8px', zIndex: '-1', }, PhotoStyle: { height: '100%', width: 'auto', }, } export default Styles