I want to add a gallery to my website but unsure of where to start. The idea is that there is an ipod in the middle and if you click on the left and right ‘buttons’ it will act as the arrows in the gallery to change the pictures. the ipod therefore acts as a mask for the pictures, but it in itself is static in the middle of the screen. How would I go about doing this? for a project I am working on. Not allowed to use any libraries, has to be pure html/css and javascript only if absolutely necessary.

I have an SVG file of the ipod that I have created on figma and exported, so it just acts as an image I think.

I tried adding the SVG in as an image after all the background things in the HTML file, but it didn’t seem to do anything. Ideally this will be added in and then the user will be able to click on the two buttons for right and left to go between pictures. essentially acting as a window. I am fairly new at coding so I am unsure of where to start/how to approach it correctly

I tried adding this to the html but it did not do anything , I am confident the svg itself is fine. it is a super basic website, there isnt any content on this page other than the background and header.

 <div id="home">
        <svg height="100" width="200" >
          <a href="/graphics/ipod.svg" >
          </a>
        </svg>
  </div>

*/ this is the CSS code for the home id
#home {
    width:100%;
    margin: 0 auto;
    font-family: Kimberlie;
}

Thanks in advance