Bootstrap 旋转木马滑块处于活动状态 class 和 next/prev 按钮不起作用

Question

我正在使用 Umbraco 的 cshtml。我想在主页上创建滑块。图像显示在页面上，但 "active" 项目不起作用。（已解决）

另一个问题是我想为每张幻灯片添加不同的标题。如何添加？

@{   
   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>

Answer 1

主要问题似乎是您的 .carousel-item class，它被指定为 .item。这些必须与指定的相同 in the documentation 才能按预期工作。

@{   
   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 中。请随时根据需要修改这些内容。

Bootstrap 旋转木马滑块处于活动状态 class 和 next/prev 按钮不起作用

Bootstrap carousel Slider active class and next/prev button not working

html

javascript

asp.net

twitter-bootstrap

umbraco7