FlexSlider is a most popular jQuery responsive slider plugin for image slider. It provides both designers and developers a fast runnable image slider.

Some important features:

• It is supported in all major browsers.

• Provides horizontal slide / vertical slide

• Provides fade animations

• Allowed to use any html elements inside the slides

• Customizable navigation options

• Semantic markups

Let's start with building our own simple and very basic image slider using FlexSlider.

Step 1. You are required to download the FlexSlider plugin. Click here for the same https://github.com/woothemes/FlexSlider

Step 2. Extract the zip folder and copy the css and js file into your folder.

Step 3. Add the following links in your file.

<link rel="stylesheet" type="text/css" href="flexslider.css">

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js"></script>

<script type="text/javascript" src="jquery.flexslider.js"></script>

Step 4. Here the html code:

<div class="flexslider">

  <ul class="slides">

   <li>

     <img src="http://www.intrawallpaper.com/static/images/Hawaii-Beach-Wallpaper-HD_8pA2vrZ.jpg">

   </li>

   <li>

     <img src="http://www.intrawallpaper.com/static/images/hd-wallpaper-03_Ux4hBFT.jpg">

    </li>

    <li>

      <img src="http://www.intrawallpaper.com/static/images/hd-wallpaper-desktop-610x381.jpg">

    </li>

    <li>

       <img src="http://www.intrawallpaper.com/static/images/HD-Wallpapers-C76.jpg">

    </li>

    <li>

       <img src="http://www.intrawallpaper.com/static/images/icelands_ring_road-3840x2160.jpg">

    </li>

    <li>

      <img src="http://www.intrawallpaper.com/static/images/hd-wallpaper-03_Ux4hBFT.jpg">

    </li>

   </ul>

</div>

Step 5 : Add style to your sheet

ul{ margin:0;padding:0;}

.flexslider .slides > li{display:inline-block;}

.flexslider .slides img{width:1400px;height:760px;background-size: cover}

.flex-control-nav{display: none}

Step 6: add the following js code

$('.flexslider').flexslider({

	animation: "slide",

	animationLoop: true,

});

And our simple slider is ready.

In the above example the image will slide horizontally as the default value for direction is horizontal. If you want your images to slide vertically add the following line of code in your js: direction: “vertical”

For custom navigation direction controlsContainer and customDirectionNav properties are used.

e.g : html code:

<div class="custom-navigate">

	<a href="#" class="flex-previous">Previous</a>

	<div class="custom-cntrls-container"></div>

	<a href="#" class="flex-next">Next</a>

</div>

js code:

controlsContainer: $(".custom-cntrls-container"),

customDirectionNav: $(".custom-navigatate a")

You can also set the min and max ranges for the items to be displayed at a time by using the minItems and maxItems property. Also, can change the width and margin of an item using itemWidth and itemMargin property.

e.g. add following lines of code into your slider :

$('.flexslider').flexslider({

	animation: "fade",

	animationLoop: false,

	itemWidth: 300,

	itemMargin: 6,

	minItems: 2,

	maxItems: 4

});

For complete flexslider properties list click here: https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties

Happy Coding :)