A dynamic Bootstrap carousel composed of images.

The controller loads a ViewModel and populates a list of CarouselItem. CarouselItem contains a string that contains the image url and a string for the alt title.

In the view, we check to see whether there is more than one CarouselItem in the ViewModel in order to start looping though and populating our carousel.

if (@Model.CarouselItemList[i] == Model.CarouselItemList[0]) applies the .active class to the first item in the list, .active represents the first item in the Carousel and must be added to at least one of the slides, otherwise the carousel will not be visible.


I've sourced the image from a cool website, dummyimage.com which lets you cook up quick mock images to link to.