FlexSlider 2 is the most powerful slider available. Fully responsive; Retina display support (image slider types only) (New); Easing effects (New) and more. The plugin requires jQuery 1.4.2 and above.
Flex Slider with Animation "Slide" Effect
Flex Slider with Animation "Fade" Effect
To Add Flex Slider you need to add this file in head tag :
1. flexslider.css
2. jquery-1.7.2.min
3. jquery.flexslider.js
// Can also be used with $(document).ready()
//Flex Slider Animation "slide" Effect
$(window).load(function() {
$('#flexSlide').flexslider({
animation: "slide"
});
});
//Flex Slider Animation "fade" Effect
$(window).load(function() {
$('#flexsliderFade').flexslider({
animation: "fade"
});
});
</script>
//Place this html code inside div tag
<h1>
Flex Slider</h1>
<div>
//Place somewhere in the <body> of your page <h2 align="left" style="border-bottom: solid 1px white;">
Flex Slider Animation "slide" Effect
</h2>
<div id="flexSlide" class="flexslider">
<ul class="slides">
<li>
<img src="Images/Screen 1.jpg" />
</li>
<li>
<img src="Images/Screen 2.jpg" />
</li>
<li>
<img src="Images/Screen 3.jpg" />
</li>
<li>
<img src="Images/Screen 4.jpg" />
</li>
</ul>
</div>
</div>
<div>
<h2 align="left" style="border-bottom: solid 1px white;">
Flex Slider Animation "Fade" Effect
</h2>
<div id="flexsliderFade" class="flexslider">
<ul class="slides">
<li>
<img src="Images/Screen 1.jpg" />
</li>
<li>
<img src="Images/Screen 2.jpg" />
</li>
<li>
<img src="Images/Screen 3.jpg" />
</li>
<li>
<img src="Images/Screen 4.jpg" />
</li>
</ul>
</div>
</div>
Two new methods are available for adding/removing slides, slider.addSlide() and slider.removeSlide(). More details about this coming soon.
Flex Slider with Animation "Slide" Effect
 |
| Screen 1 |
 |
| Screen 2 |
1. flexslider.css
2. jquery-1.7.2.min
3. jquery.flexslider.js
Script :
<script type="text/javascript">// Can also be used with $(document).ready()
//Flex Slider Animation "slide" Effect
$(window).load(function() {
$('#flexSlide').flexslider({
animation: "slide"
});
});
//Flex Slider Animation "fade" Effect
$(window).load(function() {
$('#flexsliderFade').flexslider({
animation: "fade"
});
});
</script>
HTML :
//Place this html code inside div tag
<h1>
Flex Slider</h1>
<div>
//Place somewhere in the <body> of your page <h2 align="left" style="border-bottom: solid 1px white;">
Flex Slider Animation "slide" Effect
</h2>
<div id="flexSlide" class="flexslider">
<ul class="slides">
<li>
<img src="Images/Screen 1.jpg" />
</li>
<li>
<img src="Images/Screen 2.jpg" />
</li>
<li>
<img src="Images/Screen 3.jpg" />
</li>
<li>
<img src="Images/Screen 4.jpg" />
</li>
</ul>
</div>
</div>
<div>
<h2 align="left" style="border-bottom: solid 1px white;">
Flex Slider Animation "Fade" Effect
</h2>
<div id="flexsliderFade" class="flexslider">
<ul class="slides">
<li>
<img src="Images/Screen 1.jpg" />
</li>
<li>
<img src="Images/Screen 2.jpg" />
</li>
<li>
<img src="Images/Screen 3.jpg" />
</li>
<li>
<img src="Images/Screen 4.jpg" />
</li>
</ul>
</div>
</div>
General Notes
Two new methods are available for adding/removing slides, slider.addSlide() and slider.removeSlide(). More details about this coming soon.
- slider.addSlide(obj, pos) accepts two parameters, a string/jQuery object and an index.
- slider.removeSlide(obj) accepts one parameter, either an object to be removed, or an index.
For more details and properties visit : FlexSlider 2.2.2 Updates, General Notes, Examples, Properties
Download Link :
Download Complete Project LinkIf you have any query feel free to comment it will be appreciated :)
