Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript CSS HTML PHP
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
Regards
Posted 24-Feb-13 19:56pm

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

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
  Permalink  
v3
Comments
Georges23 at 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 at 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)



Advertise | Privacy | Mobile
Web01 | 2.8.150327.1 | Last Updated 25 Feb 2013
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100