在轮播元素中显示来自多个媒体选择器的图像 (Umbraco 7)

Question

我知道以前有人问过这个问题，但我尝试过的解决方案都没有用。我需要将来自多个媒体选择器的 X 个图像插入轮播元素。

目前我只是使用硬编码索引提取每张图像。

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

但是当客户端应该能够插入任意数量的图像时，这不起作用。我需要用这个标记遍历每个图像，同时每次都更改数据幻灯片编号，以便它与我与之关联的缩略图匹配。

我如何迭代 X 数量的图像并提取它们的 URL 以在我的轮播中使用？

Answer 1

如果我这样做，我会使用这种方法，

在视图的顶部，将图像声明为变量；

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

然后使用此循环列出项目；

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

应该可以，i 变量可用于跟踪幻灯片编号，您可以在需要时使用它。

编辑；还要确保在渲染时只激活第一张幻灯片 - 您可以通过测试循环开始时的 'i' 来实现。

在轮播元素中显示来自多个媒体选择器的图像 (Umbraco 7)

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

html

iteration

umbraco

carousel

razor