Greetings fellow nerds,

Hope you had a great thanksgiving. I have been working on my portfolio website lately and have almost completed it. Luckily this time I saved the best problem for last, but I haven't had any luck hacking it.. so hopefully one of you has a helpful answer.

So here's the problem:

I have a slider on my front page which at the moment shows the slider starting from the top of the 1st image. Which makes sense of course. But what if I would wish to have it start in focus on the 2nd image?

I tried something with the index without any luck. But here's two pictures that can hopefully help explain the problem:

Bad:

Good:

Scroll container code:

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

Project image component code:

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

Appreciate any hints or solutions