Question

我正在使用引导程序轮播，它在html中使用静态图像列表很有效，但是我希望能够上传新图像并将它们显示在轮播中 - 而无需部署新版本的现场。

This answer讨论如何动态加载图像。这听起来不错，但我并没有预料到图像列表会经常变化，可能是1个/月，所以更快/更简单的东西会更好。
This answer适用于php
和this question没有答案，但似乎他也不想使用服务器端代码

这是我用于静态图像列表的html：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1" class=""></li>
        <li data-target="#myCarousel" data-slide-to="2" class=""></li>
    </ol>
    <!-- Images-->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="/Images/Slideshow/Picture1.jpg" alt="First slide">
        </div>
        <div class="item">
            <img src="/Images/Slideshow/Picture2.jpg" alt="Second slide">
        </div>
        <div class="item">
            <img src="/Images/Slideshow/Picture3.jpg" alt="Third slide">
        </div>
    </div>
    <!-- Left Right Arrows -->
    <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>

Answer 1

我决定用文字替换carousel-indicators div和carousel-inner div的内容，并通过读取目录的内容并保存到缓存来从代码隐藏中填充它们。
另一种方法是将文件名存储在数据库或文本文件中。

<强> HTML：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <asp:Literal ID="ltlCarouselIndicators" runat="server" />
    <!-- Images-->
    <div class="carousel-inner" role="listbox">
        <asp:Literal ID="ltlCarouselImages" runat="server" />
    </div>
    <!-- Left Right Arrows -->
    <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>

代码背后：

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        ObjectCache cache = MemoryCache.Default;
        try
        {
            if (cache["CarouselInnerHtml"] != null && cache["CarouselIndicatorsHtml"] != null)
            {
                //use the cached html
                ltlCarouselImages.Text = cache["CarouselInnerHtml"].ToString();
                ltlCarouselIndicators.Text = cache["CarouselIndicatorsHtml"].ToString();
            }
            else
            {
                //get a list of images from the folder
                const string imagesPath = "/Images/Slideshow/";
                var dir = new DirectoryInfo(HttpContext.Current.Server.MapPath(imagesPath));
                //filtering to jpgs, but ideally not required
                List<string> fileNames = (from flInfo in dir.GetFiles() where flInfo.Name.EndsWith(".jpg") select flInfo.Name).ToList();
                if (fileNames.Count > 0)
                {
                    var carouselInnerHtml = new StringBuilder();
                    var indicatorsHtml = new StringBuilder(@"<ol class='carousel-indicators'>");
                    //loop through and build up the html for indicators + images
                    for (int i = 0; i < fileNames.Count; i++)
                    {
                        var fileName = fileNames[i];
                        carouselInnerHtml.AppendLine(i == 0 ? "<div class='item active'>" : "<div class='item'>");
                        carouselInnerHtml.AppendLine("<img src='" + imagesPath + fileName + "' alt='Slide #" + (i + 1) + "'>");
                        carouselInnerHtml.AppendLine("</div>");
                        indicatorsHtml.AppendLine(i == 0 ? @"<li data-target='#myCarousel' data-slide-to='" + i + "' class='active'></li>" : @"<li data-target='#myCarousel' data-slide-to='" + i + "' class=''></li>");
                    }
                    //close tag
                    indicatorsHtml.AppendLine("</ol>");
                    //stick the html in the literal tags and the cache
                    cache["CarouselInnerHtml"] = ltlCarouselImages.Text = carouselInnerHtml.ToString();
                    cache["CarouselIndicatorsHtml"] = ltlCarouselIndicators.Text = indicatorsHtml.ToString();
                }
            }
        }
        catch (Exception)
        {
            //something is dodgy so flush the cache
            if (cache["CarouselInnerHtml"] != null)
            {
                Cache.Remove("CarouselInnerHtml");
            }
            if (cache["CarouselIndicatorsHtml"] != null)
            {
                Cache.Remove("CarouselIndicatorsHtml");
            }
        }
    }
}

如何创建使用动态内容的Bootstrap轮播

1 个答案: