fadeSlider

fadeSlider.js is a jQuery plugin that creates a responsive slider. It supports all major browse. Multiple effects make the slider popular and eye cache. Only dependency is jQuery and all images with same size. Major difference to other slider is the size 7kb minified. Thumbs popup is the very effective feature for fadeSlider. Support options to make it fully customizable. Its caption support all types of html tag element and customizable by CSS.

Features

• Fully responsive
• 6 Effexts supported
• Random effects implemented
• Selection any single or all effets
• Works in all major browsers for desktop and mobile
• 7kb minified
• Included JavaScript animation
• Settings timeout durations
• Multiple slideshows supported
• Manual and automatic start
• Other html-elements supported inside captions
• Visibility settings of next/prev controls
• Can be paused while hovering slideshow
• Supporte link with images wrapped
• Simple markup using unordered list
• Bullets with thumb popup

Usage

Link files

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script src="fadeslider.min.js"> </script>  

Add Markup

 <ul id="slider">     <li><img src="1.jpg" alt="" data-content=""></li>     <li><img src="2.jpg" alt="" data-content=""></li>     <li><img src="3.jpg" alt="" data-content=""></li> </ul>  

Add CSS

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

Hook up the slideshow

 <script>   $(document).ready(function() {         $('#slider').fadeslider();   }); </script>  

Options you can customize

 $('#slider').fadeslider({         autostart : true,		//Start play slider automatically, true or false         duration : 3000,		//Time between slider transitions(milliseconds)         bullet: true,			//Show bullets true or false         bulletthumb: true,		//Show bullet thumbs popup, true or false         buttons: true,			//Show next and prevoius buttons, true or false         description: true,		//Show caption of the image, true or false         effets: 'all',			//Select effets single by name or all, default is all and others are slideFromLeft, slideFromRight, slideFromTop, slideFromBottom          mousehoverpause: false		//Pause when hovering slider, true or false  });  

Following are supported browser of fadeslider.js

• Firefox
• Safari
• Chrome
• Opera
• iOS Safari
• iOS Chrome
• Firefox Mobile
• Android

Find the Live Demo url on subratadhal.com