Projects: jquery-fade-slider

Simple steps for integration

Load the jquery-fade-slider alongwith jQuery

In order to make sure that jquery-fade-slider works best for you, please use jQuery version 1.10.2 or higher

<!-- Include jQuery -->
<script src="jquery-1.10.2.min.js"></script>

<!-- Include jquery-fade-slider -->
<script src="jquery-fade-slider.js"></script>

Set up your template

This is probably the only step that you need to be careful of, yet a very simple process. All you need to do is follow the markup below, and wrap your carousel items inside a div tag.

<div class="carousel-wrapper">
  <div>Carousel Item 1</div>
  <div>Carousel Item 2</div>
  <div>Carousel Item 3</div>
  <div>Carousel Item 4</div>
  <div>Carousel Item 5</div>
  <div>Carousel Item 6</div>
  <div>Carousel Item 7</div>
  <div>Carousel Item 8</div>
  <div>Carousel Item 9</div>
  .....
</div>

Unleash the magic

Now just add the piece of code below, and let jquery-fade-slider do its magic

$(document).ready(function() {
  $('.carousel-wrapper').fadeSlider()
})

Options

Needless to say jquery-fade slider lets you make some awesome customizations. Below is a list of options that you can use to change how the plugin behaves for you.

itemPerPage
Default: 4
Datatype: Integer
This is used to define the number of items that you would like to display on every page of the carousel

itemPerPageMobile
Default: 1
Datatype: Integer
This is used to define the number of items that you would like to display on every page of the carousel if the window width is less than 450px

itemPerPageTablet
Default: 2
Datatype: Integer
This is used to define the number of items that you would like to display on every page of the carousel if the window width is greater than 450px and less than 1000px

startIndex
Default: 0
Datatype: Integer
Using this key you can tell the plugin to start loading items from the index you desire

timeout
Default: 4000
Datatype: Integer
jquery-fade-slider plays your carousel items by default, and you can control how long each page of the carousel should be active. This key lets you control the animation speed of the carousel

fade
Default: true
Datatype: Boolean
As the name suggests it applies fade effect to your slider items. So whenever you want to disable this feature, and want to use the default slide behavior you can turn it off using this option

autoplay
Default: true
Datatype: Boolean
The next items in the slider are displayed automatically. If you want to change this, turn off this flag

remote
Default: {}
Datatype: Object
Provides the ability to load data from remote sources. Example:

If the response structure of the API is as below:

[
  {
    "title": "Some Title",
    "description": "Some Description"
  },
  {
    "title": "Some Other Title",
    "description": "Some Other Description"
  },
  {
    "title": "Another Title",
    "description": "Another Description"
  },
  .
  .
  .
]

The code below should be used

var fadeSlider = $(selector).fadeSlider({
  remote: {
    url:     "remoteDataSourceURL",
    field:   "title",
    isImage: false // If the fields have image urls, you should set this to true
  }
})

Methods

jquery-fade-slider allows you to use the following methods, after it has been instantiated

next

Allows you to scroll to the next items manually

var fadeSlider = $(selector).fadeSlider({
  autoplay: false
})

fadeSlider.next()

prev

Allows you to scroll to the previous items manually

var fadeSlider = $(selector).fadeSlider({
  autoplay: false
})

fadeSlider.prev()

destroy

Disable jquery fade slider

var fadeSlider = $(selector).fadeSlider({
  autoplay: false
})

fadeSlider.destroy()

Event Callbacks

You can also add event listeners for the following events

beforeInit

This event is triggered before the initialization process starts

$(selector).fadeSlider({
  beforeInit: function(element, fadeSliderSettings){
    // Your code here
  }
})

afterInit

This event is triggered after the initialization process starts

$(selector).fadeSlider({
  afterInit: function(element, fadeSliderSettings){
    // Your code here
  }
})

beforePrevious

This event is triggered before the previous elements in slider are displayed

$(selector).fadeSlider({
  beforePrevious: function(element, fadeSliderSettings){
    // Your code here
  }
})

afterPrevious

This event is triggered after the previous elements in slider are displayed

$(selector).fadeSlider({
  afterPrevious: function(element, fadeSliderSettings){
    // Your code here
  }
})

beforeNext

This event is triggered before the next elements in slider are displayed

$(selector).fadeSlider({
  beforeNext: function(element, fadeSliderSettings){
    // Your code here
  }
})

afterNext

This event is triggered after the next elements in slider are displayed

$(selector).fadeSlider({
  afterNext: function(element, fadeSliderSettings){
    // Your code here
  }
})

beforeDestroy

This event is triggered before the plugin intance is destroyed

$(selector).fadeSlider({
  beforeDestroy: function(element, fadeSliderSettings){
    // Your code here
  }
})

afterDestroy

This event is triggered after the plugin intance is destroyed

$(selector).fadeSlider({
  afterDestroy: function(element, fadeSliderSettings){
    // Your code here
  }
})

Demos

Issues and Suggestions

Issues and suggestions for the plugin, can be mailed at rohit0981989[at]gmail[dot]com, or reported in Github Issues