Saludos compañeros nerds,

Espero que haya tenido un gran día de acción de gracias. He estado trabajando en el sitio web de mi cartera últimamente y casi lo he terminado. Afortunadamente, esta vez guardé el mejor problema para el final, pero no he tenido suerte al solucionarlo... así que espero que alguno de ustedes tenga una respuesta útil.

Así que aquí está el problema:

Tengo un control deslizante en mi página principal que en este momento muestra el control deslizante desde la parte superior de la primera imagen. Lo cual tiene sentido, por supuesto. Pero, ¿qué pasa si deseo que comience enfocado en la segunda imagen?

Intenté algo con el índice sin suerte. Pero aquí hay dos imágenes que, con suerte, pueden ayudar a explicar el problema:

Malo:

Bueno:

Código del contenedor de desplazamiento:

 import React from "react"; import { ProjectData } from "../projects/ProjectData"; import ProjectImage from "./ProjectImage"; import ScrollContainer from "react-indiana-drag-scroll"; import "./scss/ProjectCarousel.scss"; export default function ProjectCarousel() { return ( <ScrollContainer className="scroll-container"> {ProjectData.map(({ id, ...otherProps }) => ( <ProjectImage key={id} {...otherProps} /> ))} </ScrollContainer> ); }

Código del componente de la imagen del proyecto:

 import React from "react"; import GitIcon from "../soMe/icons/github_legend.png"; import "./scss/Project.scss"; export default function ProjectImage({ imageUrl, alt, github, webUrl }) { return ( <div className="image"> <a href={webUrl} alt="Go to this project's website"> <img src={imageUrl} alt={alt} /> <a href={github} alt="See project on Github"> <div className="overlay"> <img src={GitIcon} alt={alt} /> </div> </a> </a> </div> ); }

Agradezco cualquier sugerencia o solución.