Display a collection of images within a page

I have an app that calls the realtor.com API. I am successfully grabbing a collection of images and uploading them via a subform of image fields. I would like to display the images from the most recent API call somewhere on a page in the app. I have made a few attempts at this with zml, but I am having some trouble doing this. Ideally I would like to have this displayed like a carousel of images where a button click will browse through the available images. Any suggestions on how to get started with this? Below I have a snippet of my code that shows how this subform is populated.

photos = home.getJSON("photos").toList();
// Grab the images
img0 = photos.get(0).toMap().getJSON("href").removeLastOccurence("s.jpg").concat("od.jpg");
img1 = photos.get(1).toMap().getJSON("href").removeLastOccurence("s.jpg").concat("od.jpg");
img2 = photos.get(2).toMap().getJSON("href").removeLastOccurence("s.jpg").concat("od.jpg");
img3 = photos.get(3).toMap().getJSON("href").removeLastOccurence("s.jpg").concat("od.jpg");
img4 = photos.get(4).toMap().getJSON("href").removeLastOccurence("s.jpg").concat("od.jpg");
img5 = photos.get(5).toMap().getJSON("href").removeLastOccurence("s.jpg").concat("od.jpg");
img6 = photos.get(6).toMap().getJSON("href").removeLastOccurence("s.jpg").concat("od.jpg");
img7 = photos.get(7).toMap().getJSON("href").removeLastOccurence("s.jpg").concat("od.jpg");
img8 = photos.get(8).toMap().getJSON("href").removeLastOccurence("s.jpg").concat("od.jpg");
img9 = photos.get(9).toMap().getJSON("href").removeLastOccurence("s.jpg").concat("od.jpg");
//input.Image0 = "<img src=\"" + img0 + "\"></img>";
// Create rows in the subform
row0 = Search_by_Address.Property_Images();
row1 = Search_by_Address.Property_Images();
row2 = Search_by_Address.Property_Images();
row3 = Search_by_Address.Property_Images();
row4 = Search_by_Address.Property_Images();
row5 =Search_by_Address.Property_Images();
row6 =Search_by_Address.Property_Images();
row7= Search_by_Address.Property_Images();
row8= Search_by_Address.Property_Images();
row9= Search_by_Address.Property_Images();
// Insert images into rows
row0.Image = "<img src=\"" + img0 + "\"></img>";
row1.Image = "<img src=\"" + img1 + "\"></img>";
row2.Image = "<img src=\"" + img2 + "\"></img>";
row3.Image = "<img src=\"" + img3 + "\"></img>";
row4.Image = "<img src=\"" + img4 + "\"></img>";
row5.Image = "<img src=\"" + img5 + "\"></img>";
row6.Image = "<img src=\"" + img6 + "\"></img>";
row7.Image = "<img src=\"" + img7 + "\"></img>";
row8.Image = "<img src=\"" + img8 + "\"></img>";
row9.Image = "<img src=\"" + img9 + "\"></img>";
rows = Collection();
rows.insert(row0, row1, row2, row3, row4, row5, row6, row7, row8, row9);
input.Property_Images.insert(rows);