How to create a Bootstrap Carousel that uses Dynamic Content

Question

I am using the bootstrap carousel and it works great with a static list of images in the html, however I want to be able to upload new images and have them displayed in the carousel - without having to deploy a new version of the site.

• This answer talks about loading the images up on the fly. Which sounds great, but I'm not anticipating the list of images to change very often, maybe 1/month, so something faster/simpler would be better.
• This answer is for php
• and this question doesn't have an answer, but seems like he doesn't want to use server side code anyway

Here is the html I'm using for the static list of images:

<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

I decided to replace the carousel-indicators div and the contents of the carousel-inner div with literals and populate them from code-behind by reading the contents of a directory and saving to a cache.
Another way would be to store the file names in a database or text-file.

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>

Code Behind:

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");
            }
        }
    }
}