Minimal Crossfading Content Slider For jQuery - Fade Slider
File Size: | 6.71 KB |
---|---|
Views Total: | 1403 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A lightweight jQuery any content slider plugin which helps you generate an endless-looping and cross-fading slider / slideshow from a group of html elements using jQuery fadeIn and fadeOut methods.
How to use it:
1. Place jQuery library and the jQuery Fade Slider plugin's script at the end of the document so the pages load faster.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="slider.js"></script>
2. Create a group of html elements for the slider.
<div class="slider"> <div class="items">Item 1</div> <div class="items">Item 2</div> <div class="items">Item 3</div> <div class="items">Item 4</div> <div class="items">Item 5</div> ... </div>
3. Initialize the plugin to render a slider which has 5 items per slide.
$('.slider').fadeSlider({ // how many items displayed on one slide itemPerPage: 5, itemPerPageMobile: 1, // on mobile itemPerPageTablet: 2, // on tablet // initial item startIndex: 0, // transition delay timeout: 3000, // enable fade animation fade: true, // enable auto play autoplay: true, // load data from remote resources // e.g. // remote: { // url: "url for the remote source", // field: "field to be used from response", // isImage: true // } remote: false, // callbacks beforeInit: function(){}, afterInit: function(){}, beforePrevious: function(){}, afterPrevious: function(){}, beforeNext: function(){}, afterNext: function(){}, beforeDestroy: function(){}, afterDestroy: function(){} })
4. Public methods.
var fadeSlider = $(.slider).fadeSlider() // goto next item fadeSlider.next() // back to previous item fadeSlider.prev() // destroy the plugin fadeSlider.destroy()
5. Events.
$(.slider).fadeSlider({ beforeInit: function(element, fadeSliderSettings){ // triggered before initialization } }) $(.slider).fadeSlider({ afterInit: function(element, fadeSliderSettings){ // triggered after initialization } }) $(.slider).fadeSlider({ beforePrevious: function(element, fadeSliderSettings){ // triggered after the previous elements in slider are displayed } }) $(.slider).fadeSlider({ beforeNext: function(element, fadeSliderSettings){ // triggered after the next elements in slider are displayed } }) $(.slider).fadeSlider({ beforeDestroy: function(element, fadeSliderSettings){ // triggered before the plugin intance is destroyed } }) $(.slider).fadeSlider({ afterDestroy: function(element, fadeSliderSettings){ // triggered after the plugin intance is destroyed } })
Change logs:
2015-10-19
- added event listeners.
- allows to load data from remote sources
v2.1 (2015-10-12)
- Major Bug Fixes
- Add more options.
This awesome jQuery plugin is developed by jqueryfadeslider. For more Advanced Usages, please check the demo page or visit the official website.