How to dynamically add images and a link to a carousel?

I would like to understand how this works.

The jQuery carousel I would like to use is Elastislide.
http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/

The site gives us the code we need to use :

var carousel = $('#carousel').elastislide();
...
$('#carousel').append("<li><a href="#"><img src="images/10.jpg" alt="image03" /></a></li>");
carousel.add();

I also found those lines in the jquery.elastislide.js file but it's being ignored by /*

This is the HTML :

      <div>
        <div class="fixed-bar">
           <!-- Elastislide Carousel -->
           <ul id="carousel" class="elastislide-list">     
              <li><a href="http://www.site1.com"><img src="images/1.jpg" alt="img1" /></a></li>
              <li><a href="http://www.site2.com"><img src="images/2.jpg" alt="img2" /></a></li>
              <li><a href="http://www.site3.com"><img src="images/3.jpg" alt="img3" /></a></li>
              <li><a href="http://www.site4.com"><img src="images/4.jpg" alt="img4" /></a></li>
           </ul>
           <!-- End Elastislide Carousel -->
        </div>
     </div>
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
         <script type="text/javascript" src="js/jquerypp.custom.js"></script>
         <script type="text/javascript" src="js/jquery.elastislide.js"></script>
         <script type="text/javascript">      
            $( '#carousel' ).elastislide( {
            minItems : 1
             } );
          </script>

The HTML obviously looks for all those items. But it's the javascript that decides what gets shown in the html, based on what's available, right ?

So my guess is the html needs to look like this before I do anything with it :

               <!-- Elastislide Carousel -->
           <ul id="carousel" class="elastislide-list">     
           </ul>
           <!-- End Elastislide Carousel -->

And I need to add Javascript to it. Otherwise how is it going to add list items like images and links ?
Can someone confirm this is correct ?
I don't think I'm done after that, I will need to add the path somewhere, probably in the javascript as well.
Otherwise how will it know in what folder it needs to look ?

To make matters more complicated (or maybe not), I'm trying to do this in Joomla.
I could install extensions that more or less do something similar than this carousel but I don't want to because all that comes down to is clicking buttons without really understanding it.

Thank you.

Solution

Here is the full working static HTML page with Elastislide carousel to start with

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/elastislide.css" />
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/jquerypp.custom.js"></script>
  <script type="text/javascript" src="js/modernizr.custom.17475.js"></script>
  <script type="text/javascript" src="js/jquery.elastislide.js"></script>
<head>
<body>

</body>
<ul id="carousel" class="elastislide-list">     
  <li><a href="1.jpg"><img src="1.jpg" alt="img1" /></a></li>
  <li><a href="2.jpg"><img src="2.jpg" alt="img2" /></a></li>
  <li><a href="3.jpg"><img src="3.jpg" alt="img3" /></a></li>
  <li><a href="4.jpg"><img src="4.jpg" alt="img4" /></a></li>
</ul>
<script type="text/javascript">      
  $('#carousel').elastislide();
</script>

<body>
</html>

Notice that file structure is important - for such HTML you must have:
/ filanme.htm (or .php) - the page itself
/ css/* - css files included
/ js/* - javascripts included
/ images/* - Elastislide supplementary images (contained in its package)

To generate such a page with PHP hypertext preprocessor your steps could be like these.

Retrieve PHP data from Joomla CMS (or MySQL database directly) about which images and links site administrator wish to be loaded into the carousel. It's hard for me to say how to do this with Joomla, because I do not use it very often, so I would give an example of simple function, always returning 'precooked' PHP array with data.
After you got data, generate markup of ul and lis that forms carousel source and insert script with $('#carousel').elastislide(); call after it.

Here is simplistic, but working PHP code sample:

<?
// such a funciton would be inside CMS, not in your code
function CMS_get_carousel_data( $carousel_name ) {
  return array(
    array( 'link'=>'1.jpg', 'image'=>'1.jpg', 'alt_text'=>'1' ),
    array( 'link'=>'2.jpg', 'image'=>'2.jpg', 'alt_text'=>'2' ),
    array( 'link'=>'3.jpg', 'image'=>'3.jpg', 'alt_text'=>'3' ),
    array( 'link'=>'4.jpg', 'image'=>'4.jpg', 'alt_text'=>'4' )
  );
}
?>
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/elastislide.css" />
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/jquerypp.custom.js"></script>
  <script type="text/javascript" src="js/modernizr.custom.17475.js"></script>
  <script type="text/javascript" src="js/jquery.elastislide.js"></script>
<head>
<body>
<?
// calling 'CMS' function to retrieve data to be displayed in the carousel
$data = CMS_get_carousel_data('carousel_A');
?>
</body>
<ul id="carousel_A" class="elastislide-list">
  <? foreach( $data as $item ) { /* generating markup */ ?>
  <li>
    <a href="<?=$item['link']?>">
      <img src="<?=$item['image']?>" alt="<?=$item['alt_text']?>" />
    </a>
  </li>
  <? } ?>
</ul>
<script type="text/javascript">      
  $('#carousel_A').elastislide();
</script>

<body>
</html>

To get this really working you should place the code above in .php file on your site, place other required files to appropriate folders and, of course, find real API in Joomla CMS to retrieve data for carousel and and make use of it.