[英]Bootstrap carousel Slider active class and next/prev button not working
我正在使用Umbraco的cshtml。 我想在主页上创建滑块。 该图像显示在页面上,但“活动”项目不起作用。 (已解决)
另一个问题是我想为每张幻灯片添加不同的标题。 如何添加呢?
@{ var images = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("backgroundSlider").ToList(); } <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> @for (var i = 0; i < images.Count; i++) { <div class="@(i < 1 ? " active":"") item" data-slide-number="@i"> <img src='@images[i].Url'> </div> } </div> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div>
主要问题似乎是您的.carousel-item
类, .item
改为指定为.item
。 这些必须与文档中指定的相同,才能使所有功能正常工作。
@{
var images = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("backgroundSlider").ToList();
}
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
@for (var i = 0; i < images.Count; i++)
{
<div class="@(i < 1 ? " active":"") carousel-item" data-slide-number="@i">
<img src='@images[i].Url' class="d-block w-100">
</div>
}
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
对于字幕,这是一个合适的Bootstrap文档示例,可以帮助您:
@{
var images = Model.Content.GetPropertyValue<IEnumerable<IPublishedContent>>("backgroundSlider").ToList();
}
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
@for (var i = 0; i < images.Count; i++)
{
<div class="@(i < 1 ? " active":"") carousel-item" data-slide-number="@i">
<img src='@images[i].Url' class="d-block w-100">
<div class="carousel-caption d-none d-md-block">
<h5>@images[i].Title</h5>
<p>@images[i].Description</p>
</div>
</div>
}
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
在上面的示例中,我假设您的图片标题位于Title
属性中,标题位于Description
。 随时根据需要修改这些内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.