Click here to Skip to main content
15,936,633 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Good Day All

I am new to web development and i am facing difficulties with adding an image slider into my project. the name of the slider is flexslider. can anyone please direct me to a tutorial that teaches how to do that or does anyone have an alternative
i have tried to google it, but i still cant get anything.

thanks in advance

1 solution

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 () {
        function InitializeImageSlider() {
                animation: "slide",
                controlNav: true,
                directionNav: true,
                itemWidth: "100%",
                itemHeight: 400

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">
  	    	    <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
  	    	    <img src="images/kitchen_adventurer_lemon.jpg" />
  	    	    <img src="images/kitchen_adventurer_donut.jpg" />
  	    	    <img src="images/kitchen_adventurer_caramel.jpg" />

Step 8: Then link the images properly. I think you will be able to manage the rest. Thanks
Share this answer
Georges23 25-Feb-13 3:57am    
thank you very much dpalash. now its sliding however my pictures are not shrinking (i.e the pictures are too big) please help. i just want to know if there is a property that i should set.
dpalash 25-Feb-13 4:18am    
you need to upload same sized images. So when you upload make sure they are of same size.In order to do this you need a make a image resizer method that will resize the image while uploading.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900