How to use Liquid Slider

How to use Liquid Slider

Hello everyone and good day!

I am working on a personal project and I want to use the Liquid slider jquery.
http://liquidslider.com/

I cant seem to make it work, even thou I did follow the installation instructions.
Instead of text for the title, I used an image, because I would like it with caption.

Here are my codes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>日本の紹介</title>
<meta http-equiv="content-style-type" content="text/css" />
<meta name="Keywords" content="日本の紹介" />
<meta name="Description" content="日本の紹介" />
<link rel="stylesheet" href="common/css/default.css" type="text/css" media="all" />
<link rel="stylesheet" href="common/css/module.css" type="text/css" media="all" />
<link rel="stylesheet" href="common/css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="common/css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="common/css/bjstyle.css" type="text/css" media="all" />
<link rel="stylesheet" href="common/css/animate.css">
<link rel="stylesheet" href="common/css/liquid-slider.css">

<script src="common/js/BJSlider.js" type="text/javascript"></script>
<script src="common/js/rollover.js" type="text/javascript"></script>
<script src="common/js/jquery.backstretch.min.js" type="text/javascript"></script>
<script src="common/js/jquery.easing.1.3.js"></script>
<script src="common/js/jquery.liquid-slider.min.js"></script>

<script>

$(function(){
$("body").backstretch("");
});

$(function(){
     $('#slider-id').liquidSlider();
});
</script>
</head>

<body id="japan_culture">

  
      <div id="header">
        <h1><img src="common/Images/logo.png" width="186" height="62" /></h1>
        <div id="navi">
          <ul>
            <li><a href="index.html"><img src="common/Images/btn_home.png" width="150" height="125" class="imgover" id="top_btn" /></a></li>
            <li><a href="japan_culture.html"><img src="common/Images/btn_japan_culture.png" width="150" height="125" class="imgover" id="japan_culture_btn"  /></a></li>
            <li><a href="#"><img src="common/Images/btn_gallery.png" width="150" height="125" class="imgover" id="_btn"  /></a></li>
            <li><a href="profile.html"><img src="common/Images/btn_profile.png" width="150" height="125" class="imgover" id="_btn"  /></a></li>
          </ul>
        </div>
    
      
      </div>
      
      

      <div id="container">
        <div class="wrapper">
          <section id="splash">
            <section><img src="common/Images/slider/img_1.jpg" width="1170" height="500" /></section>
            <section> <img src="common/Images/slider/img_2.jpg" width="1170" height="500" /></section>
            <section> <img src="common/Images/slider/img_3.jpg" width="1170" height="500" /></section>
            <section><img src="common/Images/slider/img_4.jpg" width="1170" height="500" /></section>
            <section><img src="common/Images/slider/img_5.jpg" width="1170" height="500" /></section>
            <section><img src="common/Images/slider/img_6.jpg" width="1170" height="500" /></section>
            <section><img src="common/Images/slider/img_7.jpg" width="1170" height="500" /></section>
            <section><img src="common/Images/slider/img_8.jpg" width="1170" height="500" /></section>
            <section><img src="common/Images/slider/img_9.jpg" width="1170" height="500" /></section>
            <section><img src="common/Images/slider/img_10.jpg" width="1170" height="500" /></section>
          </section>
          <!--/#splash--> 
        </div>
        <!--/.wrapper--> 
      </div>
      
      
      <div id="home_navi">
        <ul>
          <li><a href="#"><img src="common/Images/home_navi_btn_1.png" width="370" height="150" class="imgover" /></a></li>
          <li><a href="#"><img src="common/Images/home_navi_btn_2.png" width="370" height="150" class="imgover" /></a></li>
          <li><a href="#"><img src="common/Images/home_navi_btn_3.png" width="370" height="150" class="imgover" /></a></li>
        </ul>
      </div>
 




<div id="japan_content">
<div class="content_info">
<h2>Japan</h2>


<div class="liquid-slider" id="slider-id">
     <div>
          <h2 class="title"><img src="common/Images/jpn_img_1.jpg" width="700" height="400" /></h2>
          <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
     </div>
     <div>
          <h2 class="title"><img src="common/Images/jpn_img_2.jpg" width="700" height="400" /></h2>
          <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
     </div>
     <div>
          <h2 class="title"><img src="common/Images/jpn_img_3.jpg" width="700" height="400" /></h2>
          <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
     </div>
</div>




Thank you for your help!