Hello friends

I am trying to make a Content Slider for my site. I have multiple HTML files and the structure of these files is like this:

<div id="title"><h2>Title of the Slide</h2></div>
<div id="image"><a href="http://mylink.com"><img src="image.jpg" width="600" height="300" alt="image"</a></div>
<div id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>

I have been trying to use the following script get content (but no success):

<?php
function render($position="") {
    ob_start();
    foreach(glob("/slides/*.html") as $fileName) {
    $fname = basename( $fileName );
    $curArr = file($fname);
    $slides[$fname ]['title'] = $curArr[0];
    $slides[$fname ]['image'] = $curArr[1];
    $slides[$fname ]['content'] = $curArr[2];

    foreach($slides as $key => $value){

        ?>
          <div id="slide-title">
            <?php echo $value['title'] ?>
          </div>

          <div id="slide-content">
              <?php echo $value['image'] ?>
          </div>

          <div id="slide-image">
              <?php echo $value['content'] ?>
          </div>

        <?php
        }}
        ?>
    <?php
    return ob_get_clean();
}

But then I came to know about a jQuery function.... (again no success)

    jQuery.noConflict();
      (function($){
        $(document).ready(function () {    
          $('#slide-title').load('slides/slide1.html #title');
          $('#slide-content').load('slides/slide1.html #content');
          $('#slide-image').load('slides/slide1.html #image');
      });   
    })(jQuery);

Now My questions are.....

1. Am I using the right syntax.

2. How do I get the content from multiple files using jQuery.

Please Note : My knowledge on Programming is almost '0'. I have just started learning it.