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)

  Print Answers RSS
0 George Jonsson 215
1 Kornfeld Eliyahu Peter 169
2 Zoltán Zörgő 139
3 PIEBALDconsult 130
4 OriginalGriff 120
0 OriginalGriff 6,165
1 DamithSL 4,658
2 Maciej Los 4,107
3 Kornfeld Eliyahu Peter 3,649
4 Sergey Alexandrovich Kryukov 3,342


Advertise | Privacy | Mobile
Web04 | 2.8.141220.1 | Last Updated 25 Feb 2013
Copyright © CodeProject, 1999-2014
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