Simple Responsive Fading Image Slideshow Plugin with JQuery - slidify

slidify is a lightweight & easy jQuery plugin for creating a responsive image slideshow/carousel with fading transition effects and support of autoplay, infinite loop and custom themes.

How to use it:

1. Load the jQuery javascript library together with jQuery slidify plugin's javascript and stylesheet in the page.

<link href="css/slidify.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-slidify.js"></script> 

2. Create the Html for a fading image slideshow using unordered list.

<div id="demo" class="fancy-new-slider">
<ul>
<li><img src="images/Chrysanthemum.jpg"/></li>
<li><img src="images/Koala.jpg"/></li>
<li><img src="images/Lighthouse.jpg"/></li>
<li><img src="images/Chrysanthemum.jpg"/></li>
<li><img src="images/Koala.jpg"/></li>
<li><img src="images/Lighthouse.jpg"/></li>
</ul>
</div>

3. Call the plugin on the parent element and setup the slideshow in options.

<script>
$(document).ready(function(){
$( "#demo" ).slidify({
width:'700',
height:'300',
activeslide:1,
activeClass:'myactive',   
fadeingSpeed:800,
theme:'black', // "black"|"grey"|"white"|keep it blank for no theme
responsive:true
});
});
</script>

---

This awesome jQuery plugin is developed by sarikatyagi. For more Advanced Usages, please check the demo page or visit the official website.