flexslide animation using jquery and html

Question

I wrote my animation code like below but it doesn't work (I've added jquery(jquery-1.9.1.js) and flexslider(jquery.flexslider-min.js) files to my project). Hav u any ideas?

Html code

<div class="slider">
<ul class="slides">

    <li>
        <img src="images/demo_image_26.jpg" alt="" />
        <div class="slider-caption-wrapper">
            <div class="slider-caption">
                <p class="colour-caption medium-caption">100% Responsive &amp; Mobile Ready</p>
                <div class="clearboth"></div>
                <p class="dark-caption large-caption">Room Availability Checker and Booking</p>
            </div>
        </div>
    </li>

    <li>
        <img src="images/demo_image_06.jpg" alt="" />
        <div class="slider-caption-wrapper">
            <div class="slider-caption">
                <p class="colour-caption medium-caption">5 Fantastic Home Pages to Choose From</p>
                <div class="clearboth"></div>
                <p class="dark-caption large-caption">Customer Testimonials &amp; Event Management</p>
            </div>
        </div>
    </li>

    <li>
        <img src="images/demo_image_25.jpg" alt="" />
        <div class="slider-caption-wrapper">
            <div class="slider-caption">
                <p class="colour-caption medium-caption">Fully Customizable Colour Scheme</p>
                <div class="clearboth"></div>
                <p class="dark-caption large-caption">4 Pre Configured Colour Schemes Available</p>
            </div>
        </div>
    </li>

</ul>

JS code

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.slider').flexslider({
    slideshow: true
 });
  });
</script>

Answer 1

You need to add the flexsider CSS file. I think you have missed in your code. I have created one fiddle with your code and I copied flexsider javascript and CSS file from your site. After that it was working fine with the misalignments. Check My Fiddle Here.

$(window).load(function() {
  $('.slider').flexslider({
  slideshow: true,
  slideshowSpeed: 2000
  });
});