jquery-fade-slider - Demos

A simple jQuery plugin to create a perfectly responsive slider carousel

Default Behavior

$(selector).fadeSlider()

Set itemsPerPage(6 for Desktop and Tabs, 3 on Mobile)

$(selector).fadeSlider({
  itemPerPage:       6,
  itemPerPageTablet: 6,
  itemPerPageMobile: 3
})

Start from item number 3

$(selector).fadeSlider({
  startIndex: 3
})

Animation Timeout

$(selector).fadeSlider({
  timeout: 8000
})

Slide effect

$(selector).fadeSlider({
  fade: false
})

No autoplay - Fade effect

var fadeSlider = $(selector).fadeSlider({
  autoplay: false
})
$(prevButtonSelector).on('click', function(){ fadeSlider.prev() })
$(nextButtonSelector).on('click', function(){ fadeSlider.next() })


No autoplay - Slide effect

var fadeSlider = $(selector).fadeSlider({
  autoplay: false,
  fade: false
})
$(prevButtonSelector).on('click', function(){ fadeSlider.prev() })
$(nextButtonSelector).on('click', function(){ fadeSlider.next() })


Event Listeners

$(selector).fadeSlider({
  fade: false,
  autoplay: false,
  beforeInit: function(element, fadeSliderSettings){
    // beforeInit Handler
  },
  afterInit: function(element, fadeSliderSettings){
    // afterInit Handler
  },
  beforePrevious: function(element, fadeSliderSettings){
    // beforePrevious Handler
  },
  afterPrevious: function(element, fadeSliderSettings){
    // afterPrevious Handler
  },
  beforeNext: function(element, fadeSliderSettings){
    // beforeNext Handler
  },
  afterNext: function(element, fadeSliderSettings){
    // afterNext Handler
  },
  beforeDestroy: function(element){
    // beforeDestroy Handler
  },
  afterDestroy: function(element){
    // afterDestroy Handler
  }
})

Remote Source

$(selector).fadeSlider({
  remote: {
    url:     "url for the remote source",
    field:   'source',
    isImage: true
  }
})