Change this -
</head>
to this -
<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
</head>
That completes step 1 and step 3.
Then change this -
<div id="header"><img src="images/header.jpg" width="960" height="310" alt="bbb"></div>
to this -
<div id="header" class="flexslider">
<ul class="slides">
<li><img src="images/header.jpg" width="960" height="310" alt="bbb"></li>
<li><img src="..."></li>
<li><img src="..."></li>
<li><img src="..."></li>
<li><img src="..."></li>
</ul>
</div>
The slider is installed. Now to make it work the way you want (vertical slide), change this -
$('.flexslider').flexslider();
to this -
$('.flexslider').flexslider({
animation:slide });
and you will be well on your way. See how it looks.
