How to add slider in the wordpress index.php file? - php

Question

My javascript code for slider is as follows which is displayed in the
html format but not displayed when I integrated it into a theme.This code is in header.php.I have called all the requred js css and image files in it and that worked fine but the problem is in slider portion.
Code in header.php
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
useCSS: Modernizr.touch
});
});
</script>
Code in index.php
<div class="flexslider">
<ul class="slides">
<li>
<div class="hero-unit">
<h1>Affordable Hosting Solution</h1>
<h3>Flathost is a bootstrap based responsive minimal, flat and afforable
hosting template with easy customization and great support</h3>
<div class="slider-actions text-center"> <a href="features.html" class="btn
btn-success btn-lg">Explore Features </a> <a href="pricing.html" class="btn
btn-primary btn-lg">Plans and Pricing </a> </div>
</div>
</li>
<li>
<div class="slide2">
<p><img src="<?php echo get_template_directory_uri(); ?
>/images/server1.png" alt="server" class="img-responsive center-block"></p>
<h1>Dedicated and VIP Hosting</h1>
</div>
</li>
<li>
<div class="slide3">
<p class="pull-left"><img src="<?php echo get_template_directory_uri(); ?
>/images/server2.png" alt="server" class="img-responsive"></p>
<h1>Managed Hosting</h1>
<h3>Flathost is a bootstrap based responsive minimal, flat and afforable
hosting template with easy customization and great support </h3>
</div>
</li>
</ul>
</div>
</div>
</div>
<?php echo do_shortcode('[thethe-image-slider name="flexslider"]'); ?>