2D Image Slider

Hi everyone!

I need to do a slider with several images. The goal is to be able to slide image by image, step by step, and at each step, the next image will be exactly in the "selection square" like below. Then, a script will know which image is in the square and will return an int, like the ID for the image.

To do like in the image below, I made a Panel with a Scroll Rect script set as Horizontal and Clamped with as horizontal scrollbar a scrollbar gameobject as child of the panel. I created a few more panels (one for every image) which I put as child of the first one.

Am I on the right way? How can I do to make sure the image will stop exactly in the yellow square? I did it with 10 images and a "Number of steps" of 10 in the script of the scrollbar gameobject but I hope there is a more accurate way to do it.
Also, is it possible to use colliders with the new UI? Because I don't see an other way to get the ID of the image when entering the square.

It would be really helpfull, thanks!