Written explanation: The first part of the loadNextImage function sets the value of response to the API data that varies depending on what the variable breedID is equal to. The breedID will always be one of the cat breeds that correlates to the end of the URL that pulls the cat data from the API link.

In the next section, we create a new variable response2 which is set equal to the api link which pulls the images. The loadnextimage function is connected to the whichcat variable which is defined in the data section. In order to switch the cat breeds in and out, we create a prop which sets meow equal to a string and in the data section, we set whichcat equal to this.meow so we can change out the identity of meow.

When we pull up the component in the div of the html, we set meow (the prop) equal to whichever breed we're targeting which then changes the breedID in the url and pulls the photos and information from the corresponding API. To pull the other data from the API, like description and temperament, we create a variable this.xyz and set it equal to the name of the data element inside the array we are targeting, so for example this.child is set equal to the data point inside of each breed's array that says child_friendly and delivers the corresponding value.

I believe the slideshow works by saying when the array is greater than or equal to the length of allofit, which is set equal to the API URL in the response2 section, the slideshow goes back to the first array since it is set equal to 0 (which in code means the first of something). The second part says that when allofit is selecting any one of the arrays, it iterates plus one and shows the next image.