Bootstrap輪播Slider活動類和“下一個/上一個”按鈕不起作用

Question

我正在使用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> 

Answer 1

主要問題似乎是您的.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 。 隨時根據需要修改這些內容。