How to (efficiently) add captions to Bootstrap carousel filled by javascript

Question

I'm currently building a Web Tutorial for my company. It is supposed to guide users setting up their new company owned iOS device.

Currently I'm doing it this way:

1. setting up the pages with MS PowerPoint (addint text and stuff),

2. exporting it as .png

3. adding this to the website.

This is okay, but maybe it would help to do all the stuff in HTML/JS/CSS.

Like, load the image files and load the captions from another single file accordingly. I'm not that deep into javascript or jquery to see a possible way to do it right now. I'm thinking about putting the captions into a .yml or so... any help is appreciated!

This is my current code; var laenge is the number of image filed to be loaded.

 var laenge = 45; $(document).ready(function() { for (var i = 1; i <= laenge; i++) { $('<div class="item"><img src="images/Bestandsgeraete/Folie' + io + '.png" class="img-responsive"><div class="carousel-caption"></div></div>').appendTo('.carousel-inner'); } $('#myCarousel').find('.item').first().addClass('active'); }); 

 <div id="myCarousel" class="carousel slide" data-ride="carousel" align="center"> <!-- Wrapper for slides --> <div class="carousel-inner" align="center" role="list"> </div> <!-- Controls --> </div> 

Answer 1

No need to mess with javascript. Only you have to do is make changes in HTMl and CSS. Anything between <div class="item"></div will showup in a slide. You can add any html element like image, heading, paragraph, and so on. Even you can assign them id / classes to target them and apply formating.

Example:

<div class="item active">
    <img src="xyz">
    <h1>This is a heading</h1>
    <p>this is a paragraph</p>
    <div class="anyDiv"></div>
</div
<div class="item">
    <img src="xyz">
    <h1>This is a heading</h1>
    <p>this is a paragraph</p>
    <div class="anyDiv"></div>
</div

Here is how I modified a bootstrap carousel for one of my clients: