displaying files from a directory using Bootstrap Carousel
Question: I am new to JavaScript and started experimenting with Bootstrap Carousel. I
wrote test code that works and displays images when I manually create the
Carousel items, e.g

    
    
       <div id="myCarousel" class="carousel slide" data-interval="false">
        <div class="carousel-inner">
          <div class="item active">
            <img src="img/1.jpg"/>
          </div>
          <div class="item">
            <img src="img/2.jpg"/>
          </div>
          <div class="item">
            <img src="img/3.jpg"/>
          </div>
        </div><!-- .carousel-inner -->
      </div><!-- .carousel -->
    

However, what I would like to do is to specify a local directory and be able
to automatically load and view the images there, that is create the list of
Carousel items automatically.

My questions are:

  * How can I do this with scripting, e.g. using perl or python to get the list of files in the directory? How do I pass this list to Carousel in JS?
  * Googling, I found that HTML5 has a File API that enables JS to access the local file system. How can I do the above using this approach?

Thanks!


Answer: Just make a loop in your choice of language that reads the contents of a
directory and outputs the HTML.

e.g. in python

    
    
    import os
    dirname = 'img'
    html = '<div id="myCarousel" class="carousel slide" data-interval="false">\n\t<div class="carousel-inner">'
    active = "active"
    for filename in os.listdir(dirname):
        if ".jpg" in filename:
            html = html + '\n\t\t<div class="item %s"><img src="%s"/></div>' % (active, dirname + "/" + filename)
            active = ""
    html = html + '</div><!-- .carousel-inner -->\n</div><!-- .carousel -->'
    

then obviously you need to do something with the html variable like write it
to a file

