Click here to Skip to main content
11,503,113 members (75,188 online)
Rate this: bad
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
Posted 24-Feb-13 18:56pm

1 solution

Rate this: bad
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 () {
        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
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
Web03 | 2.8.150520.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