Step 1: Download the zipped file from the link that i have provided and then extract the zipped file.
Step 2: After extracting the zipped file you will get a css file and two js files at the root directory.
Step 3: Put the images folder and the flexslider.css file in a new folder and name the folder css.
Step 4: Download the jquery-1.8.2-min.js and make a new folder and name it js. put the downloaded file and jquery.flexslider.js file in the js folder.
Step 5: Now link the css and js file in the following order.
<link href="css/flexslider.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2-min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.flexslider.js"></script>
Step 6: Then add the following script at the header section of your .aspx page
<script type="text/javascript">
$(document).ready(function () {
InitializeImageSlider();
});
function InitializeImageSlider() {
$('.flexslider').flexslider({
animation: "slide",
controlNav: true,
directionNav: true,
itemWidth: "100%",
itemHeight: 400
});
}
</script>
Step 7: Then Copy the code below and paste it anywhere in the page.
<div id="main" role="main">
<section class="slider">
<div class="flexslider carousel">
<ul class="slides">
<li>
<img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="images/kitchen_adventurer_caramel.jpg" />
</li>
</ul>
</div>
</section>
Step 8: Then link the images properly. I think you will be able to manage the rest. Thanks