Add slides to Bootstrap 3 carousel dynamically using jQuery

Question

I\'m trying to add slides to Bootstrap carousel using jQuery but it is not acting as a slider in the browser. Instead it\'s showing the images in list view.

Answer 1

Here is a more current answer. The solution by @avcajaraville was written in 2014; with Bootstrap version 4 the concepts he presented are still applicable but the details regarding Class names have changed and the old code won't work.

In this solution, I don't bother with "indicators," the addition of indicators is left to the interested reader. (The "indicators" are symbols representing the list, there is one "dot" per photo in the carousel, and the dot for the current photo is highlighted.)

Here is the HTML. This is "bare-bones" version. A more robust version appears later in this post.

Note that I left out the attribute data-ride="carousel"; the equivalent is expressed in the config options passed via JavaScript. This complies with the latest documentation.

Here is the JavaScript. For the sake of variety, this code differs from that of @avcajarville by mostly not using jQuery. On the other hand, the interface to Bootstrap is through jQuery, only, and that is what you see in the last line of this code.

The presumption is that an array called recs is a list of objects, where each object holds information about the photos, including the file name and some descriptive text. For each rec, a string of html is generated, and pushed onto the array itemHtmlStrings. Those strings then become the innerHTML of carousel-inner element. Then, one of the new elements (the first one) gets marked as the active (i.e. visible) image.

var itemHtmlStrings = [];
for(var rec of recs) {
  var itemHtmlString = ''
    +'
'
    + ``
    +  `
`
    +    `
${rec.captionHdr}
`
    +    `
${rec.captionText}
`
    +  '
'
    +'
'
  itemHtmlStrings.push(itemHtmlString);
}
var myCarouselEl = document.getElementById("myCarousel");
var carouselInnerEl = myCarouselEl.getElementsByClassName("carousel-inner")[0];
carouselInnerEl.innerHTML = itemHtmlStrings.join("\n");
carouselInnerEl.firstElementChild.className += " active";
$(myCarouselEl).carousel({slide : true, ride : true });

Unfortunately, after writing this code, I decided that the Carousel offered by Bootstrap is not for me. This code is OK if your only requirement is to rotate through an enumerated set of images and show exactly one at a time. I am not using this code because I need to show more than one image, and it seems Bootstrap does not do that. Furthermore, I had problems because my images are not all identical; some needed to be rotated upon load; that was a problem in Bootstrap Carousel. Also, I'm not sure how well it handles diversity of size and aspect ratio.

I promised the non-bare-bones version of the HTML, so here it is. This includes buttons that allow the user to request the Previous and Next slide. Also, it includes aria-hidden attributes and sr-only spans; these are codes for screen readers. The sr-only class is the Bootstrap indicator of screen-reader-only. (Screen reader is a "voice" for visual impaired people.)

    

    
    
        
        Previous
    
    
        
        Next
    

To add indicators, put

prior to the carousel-inner, and adjust the JavaScript code to insert a list of