How do we use image slider in website using jquery

See more:

CSS

JScript.NET

jQuery

I tried like this but images sliding is not working and images are overlaping one on another.
so please get me out of this problem

<script>
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});
 </script>

<div class="middlediv">
        <div id="imagediv" style="float:left;">
           <ul class="middlediv">
    <li>
      <img src="Content/themes/base/images/Banner01.png" />
    </li>
    <li>
      <img src="Content/themes/base/images/Banner02.png" />
    </li>
    <li>
      <img src="Content/themes/base/images/Banner03.png" />
    </li>
    <li>
      <img src="Content/themes/base/images/Banner04.png" />
    </li>
  </ul>
</div>