Minimal Crossfading Content Slider For jQuery - Fade Slider

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.