Displaying images from multiple media picker in a carousel element (Umbraco 7)

Question

I know this has been asked before, but no solution I've tried has worked for me. I need to insert X number of images from a multiple media picker into a a carousel element.

Currently I merely extract each image using a hardcoded index.

<div class="active item" data-slide-number="0"> <img src='@(Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("sommerhusBilleder").ToList()[0].Url)'></div>

But this doesn't work when the client should be able to insert any number of images. I need to iterate over each image with this markup, while also changing the data-slide-number each time, so that it matches to the thumbnails I have associated with it.

How can I iterate over X amount of images and extract their URL's to use in my carousel?

Answer 1

If I were doing this, I'd use this approach,

At the top of the view, declare the images as a variable;

@{   
   var images = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("sommerhusBilleder").ToList();
}

Then use this loop to list out the items;

@for (var i = 0; i < images.Count; i++)
{
    <div class="@(i < 1 ? "active":"") item" data-slide-number="@i"> 
        <img src='@images[i].Url'>
    </div>
}

Should do the trick, The i variable can be used to track the slide number and you can use that where needed.

Edit; also be sure to only make the first slide active when rendering - you can do this by testing what 'i' is at the start of the loop.