Multi-slide Fading Carousel Plugin With jQuery - fadeCarousel.js

fadeCarousel.js is a small, responsive, cross-fading jQuery carousel plugin that allows you to display multiple slides at a time. You can also specify how many slides to show on varying devices like mobile, tablet, and desktop.

How to use it:

1. Add as many slides to the carousel:

<div class="fade-carousel">
  <div class="fade-item">
    <div class="item-inner">Item 1</div>
  </div>
  <div class="fade-item">
    <div class="item-inner">Item 2</div>
  </div>
  <div class="fade-item">
    <div class="item-inner">Item 3</div>
  </div>
  ...
</div>

2. Load the jquery.fadeCarousel.js after loading jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.fadeCarousel.js"></script>

3. Initialize the plugin to activate the carousel.

$('.fade-carousel').fadeCarousel();

4. Specify the amount of slides to show on specific devices.

$('.fade-carousel').fadeCarousel({
  items: 3,
  responsive: {
    768: {
      items: 1
    },
    992: {
      items: 2
    }
  }
});

5. Override the default selector of slide items.

$('.fade-carousel').fadeCarousel({
  itemSelector: '.fade-item'
});

6. Set the animation speed and transition delay.

$('.fade-carousel').fadeCarousel({
  delay: 4000,
  fadeDuration: 2000,
});

---

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