Building a simple slideshow component in React using Hooks

I was trying to build a simple slideshow component using React Hooks. Initially, I was thinking of how to use calculations to position a picture properly on the page or inside of the component region.

It turns out it is a lot simpler, if we use containers or containers that cover the whole viewport to contain a picture, and move the container accordingly.

The reason is, if we calculate where to place the image, and what size to use, it can be a lot of calculations. If we use a container and set the max-width and max-height, and we center the picture in the container, such as by using the container as a flex box, then we don't have to do all the calculations and it is automatically handled by CSS.

In the example here, I am trying to use the viewport, and to better use it using CSS, note that we can use the unit of vw and vh, which is viewport width and viewport height.

I "dock" the containers at the left of the screen (hidden):

  function theLeftShift(i) {
    if (currentImageIndex === i) return 0;
    else if (i > currentImageIndex) return "100vw";
    else return "-100vw";
  }

and

      <ul>
        {Array.from({ length: nImages }, (e, i) => i + 1).map((e, i) => (
          <li style={{ left: theLeftShift(i) }}>
            <img src={`./pic${e}.jpg`} />
          </li>
        ))}
      </ul>

We don't really need to move the containers further and further left, and can just dock it to the immediate left. That way, we don't need to create a region that is wider than it is needed.

The demo: https://codesandbox.io/s/simple-slideshow-z2089?file=/src/App.js

The full page demo: https://z2089.csb.app/