Automatic Cross-fading Slider For Any Content - autoSlider

autoSlider is a jQuery plugin to create an automatic, cross-fading slider that supports any content type and is fully customizable via CSS.

How to use it:

1. Insert slides to the auto slider.

<div class="autoSlider">
  <div class="slider-content">
    <div class="active">
      Slide 1
    </div>
    <div class="active">
      Slide 2
    </div>
    <div class="active">
      Slide 3
    </div>
    <div class="active">
      Slide 4
    </div>
    <div class="active">
      Slide 5
    </div>
  </div>
  <div class="currentIndex">1/1</div>
</div>

2. Add controls to the slider. Ideal for No Fade mode.

<div class="notAuto-content">
  <button class="back-btn" data-action="GoBack"><<< Back</button>
  <button class="index-btn" data-action="GoSlide" data-id="2">Slide [2]</button>
  <ul class="all-slides"></ul>
  <button class="index-btn" data-action="GoSlide" data-id="4">Slide [4]</button>
  <button class="next-btn" data-action="GoNext">Next >>></button>
</div>

3. Import the main JavaScript file autoSlider.jquery.js.

<script src="jquery.min.js"></script>
<script src="autoSlider.jquery.js"></script>

4. Initialize the plugin to generate a basic slider.

$(Selector).autoSlider();

5. Apply your own CSS styles to the slider.

.autoSlider {
  /* styles here */
}

.slider-content  {
  /* styles here */
}

.active {
  /* styles here */
}

6. Default CSS selectors & classes.

$(Selector).autoSlider({
  sliderContent_selector: '.slider-content',
  notAutoContent_selector: '.notAuto-content',
  allSlides_selector: '.all-slides',
  elmDiv_selector: 'div',
  dotActive_class: 'active',
  button_selector: 'button',
  currentIndex_selector: '.currentIndex'
});

7. Config the cross-fading effect.

$(Selector).autoSlider({
  interval: 3500,
  fade: 500,
  isAuto: true // false = disable
});

8. Set the active slide on init. 0 indexed (0 = slide 1).

$(Selector).autoSlider({
  currentIndex: 0
});

---

This awesome jQuery plugin is developed by m-primo. For more Advanced Usages, please check the demo page or visit the official website.