Bootstrap carousel not showing images

Question

I'm trying to make a carousel which browses through the images in an image folder. A script automatically adds the items to the carousel based on the images present. The images are labelled 1, 2, 3, and so on.

But no matter what I try, the carousel doesn't show the image. I've tried converting the images to different format. The images are originally JFIF.

Here's my code:



    
        
        
        Edexcel International GCSE (9-1) Human Biology Student Book | Scotch's Pirated Book Reader (PBR) v3.6
        
    
    
        
            
                Image browser
                Coded by someone
            



            
                
                    
                
                
                    
                    Previous
                
                
                    
                    Next

The new.js file has the script which loads the images into the carousel. A basic summary of what it does is:

'use strict';

function load()
{
    var index = 2; // The first image is named 2.jfif
    var carousel_innerHTML = "";

    while (index < 278) // There are 277 images
    {
        carousel_innerHTML = carousel_innerHTML + makeEntry(index);
        index++;
    }

    document.getElementById('carousel-inner').innerHTML = carousel_innerHTML;
}

function makeEntry(index)
{
    return ' 
';
}

Andrew L · Accepted Answer

You were missing a couple things:

You need to add an active class to the first div in the carousel-inner div
You should initialize the carousel when finished loading the images. $('#pageCarousel').carousel({interval: 3000});

Here is a working example for you.

'use strict';
// for this example
var images = ["","","https://upload.wikimedia.org/wikipedia/commons/c/c9/10150811_677994762257483_131131840_n_677994762257483.jpg", "https://upload.wikimedia.org/wikipedia/commons/1/1b/10603847_756710051052620_5858255939401577860_o_756710051052620.jpg","https://upload.wikimedia.org/wikipedia/commons/6/6a/1073115_556203904436570_702830415_o_556203904436570.jpg"]

function load() {
  var index = 2; // The first image is named 2.jfif
  var carousel_innerHTML = "";

  while (index < 5) // There are 277 images
  {
    carousel_innerHTML = carousel_innerHTML + makeEntry(index);
    index++;
  }

  document.getElementById('carousel-inner').innerHTML = carousel_innerHTML;
  $('#pageCarousel').carousel({interval: 3000});
}

function makeEntry(index) {
  var first = index === 2 ? "active" : "";    
  return ' 
';
}




  
    
      Image browser
      Coded by someone
    



    
      
        
      
      
        
        Previous
      
      
        
        Next

Bootstrap carousel not showing images

Answers (1)

Related Questions