In stuck mode to try and create a loop for my products in HTML

I have nearly finished with my project but now stuck on the hardest challenge - create a loop. I am not sure maybe map is the right method to do this. Basically, I have created a 3D can that rotates clockwise that shows the user of the can in full detail. When the cursor hovers the can, the can doubles the size and displays in front of the screen, again to see it in much better detail. Because there are different colour cans for different types of flavours, I need to create a loop and avoid DRY. However, I am struggling to do this.

I am not asking for someone to do this for me but someone to say look at these methods or try this out and see if it works differently etc…

This is my code. Hopefully, when you look at it you understand what I am. I have a 3D can on display, in an active slider but the next number of slides are empty. This is where I want to fill in the gaps for different cans - that will slide to the left, and if the cursor hovers the can it will display front of the screen.

Just really asking for advice on what to do next, what problems I should be looking at, etc. I’ve been struggling for a week now trying to create a loop but finding it impossible