Infinite Automatic Carousel With Fade Transitions

A blazing-fast, SEO-friendly, and super smooth carousel that has the ability to fade through a list of web content using jQuery and CSS3 transitions.

Nowadays, everyone is using carousels in their websites. There are many fancy carousel plugins out there that you can use to achieve the same result. This short tutorial might be helpful if you prefer to build your own carousels from scratch in order to be able to control and customize everything as needed.

How to use it:

1. Create an HTML list for the carousel.

<ul id="myCarousel"> 
  <li>
    Item 1
  </li>
  <li>
    Item 2
  </li>
  <li>
    Item 3
  </li>
  ... 
</ul>

2. The main CSS styles for the carousel.

ul {
  position: absolute;
  top: 50%;
  width: 800px;
  height: 200px; 
  left: 50%;
  margin-left: -400px;
  margin-top: -130px;
}

ul > li {
  width: 25%;
  list-style-type: none;
  position: absolute;
  top: 0;
  padding: 20px;
  height: 200px; 
  opacity: 0;
  padding-top: 40px;
  text-align: center;
  transition: 1s opacity; 
}

.active {
  opacity: 1;
}

3. Load the needed jQuery JavaScript library at the end of the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

4. Transform the HTML list into an infinite automatic carousel.

// override the transition speed here
var timer = 4000;

var i = 0;
var max = $('#myCarousel > li').length;

$("#myCarousel > li").eq(i).addClass('active').css('left','0');
$("#myCarousel > li").eq(i + 1).addClass('active').css('left','25%');
$("#myCarousel > li").eq(i + 2).addClass('active').css('left','50%');
$("#myCarousel > li").eq(i + 3).addClass('active').css('left','75%');


setInterval(function(){ 

  $("#myCarousel > li").removeClass('active');

  $("#myCarousel > li").eq(i).css('transition-delay','0.25s');
  $("#myCarousel > li").eq(i + 1).css('transition-delay','0.5s');
  $("#myCarousel > li").eq(i + 2).css('transition-delay','0.75s');
  $("#myCarousel > li").eq(i + 3).css('transition-delay','1s');

  if (i < max-4) {
    i = i+4; 
  }

  else { 
    i = 0; 
  }  

  $("#myCarousel > li").eq(i).css('left','0').addClass('active').css('transition-delay','1.25s');
  $("#myCarousel > li").eq(i + 1).css('left','25%').addClass('active').css('transition-delay','1.5s');
  $("#myCarousel > li").eq(i + 2).css('left','50%').addClass('active').css('transition-delay','1.75s');
  $("#myCarousel > li").eq(i + 3).css('left','75%').addClass('active').css('transition-delay','2s');

}, timer);

---

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