我尝试使用过渡照片: [英] I try to use the transition Photos:
本文介绍了我尝试使用过渡照片:的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
@{
int x = 0;
foreach (var img in Model.POIsImages)
{
@Html.Hidden("imageids[" + x + "]", img.ImageId);
<div class="item active">
<input type="hidden" name="keep[@x]" value="1" data-imageid="@x" />
<a class="darken" >
<img src="@Url.RouteUrl("Media", new { id = img.FileId })" width="80" height="80" />
<span class="hoverText" data-imageid="@x">Remove</span>
</a>
</div>
@Html.Hidden("imageids[" + x + "]", img.ImageId);
<div class="item">
<input type="hidden" name="keep[@x]" value="1" data-imageid="@x" />
<a class="darken" >
<img src="@Url.RouteUrl("Media", new { id = img.FileId })" width="80" height="80" />
<span class="hoverText" data-imageid="@x">Remove</span>
</a>
</div>
x++;
}
@Html.Hidden("NumberofImages", x);
}
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
他将所有图片放在一起 - 不为每个图像创建DIV,
如何更正它 - 通过图像图像并不会一起出现??
He put all the pictures together - does not create DIV for each image,
How do I correct it-pass image image and will not appear all together??
推荐答案
问题是你为每个图像渲染两个轮播项目,其中一个被标记为活动 。查看文档 [ ^ ],只有第一项应标记为有效。
尝试将循环更改为:
The problem is that you're rendering two carousel items for each image, one of which is marked as "active". Looking at the documentation[^], only the first item should be marked as "active".
Try changing your loop to:
int x = 0;
string cssClass = "item active";
foreach (var img in Model.POIsImages)
{
@Html.Hidden("imageids[" + x + "]", img.ImageId);
<div class="@cssClass">
...
</div>
cssClass = "item";
x++;
}
这篇关于我尝试使用过渡照片:的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文