Question

我知道以前曾经问过这个问题，但我尝试过的解决方案并没有给我带来帮助。我需要将多个媒体选择器中的X个图像插入到轮播元素中。

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

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

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

如何迭代X张图片并提取他们的网址以便在我的轮播中使用？

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变量可以用来跟踪幻灯片编号，你可以在需要的地方使用它。

编辑;另外一定要确保只在渲染时使第一张幻灯片处于活动状态 - 你可以通过测试＆＃39; i＆＃39;是在循环的开始。

在旋转木马元素中显示来自多个媒体选择器的图像（Umbraco 7）

1 个答案: