Simple jQuery Fader

index.html

<div id="fader">
  <ul>
    <li>FADE 1</li>
    <li style="background: #aaa;">FADE 2</li>
    <li>FADE 3</li>
    <li style="background: #aaa;">FADE 4</li>
  </ul>  
</div>

script.js

jQuery(document).ready(function ($) {

	$(function(){
		$('#fader ul li:not(:first-child)').hide();
		setInterval(function(){
			$('#fader ul li:first-child').fadeOut()
			.next('li').fadeIn()
			.end().appendTo('#fader ul');
		}, 
		3000);
	});
  
});    

Simple-jQuery-Fader.markdown

Simple jQuery Fader

A script easy to implement in own enviroment.

A Pen by Alexander Schmidt on CodePen.

License.

style.css

#fader {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;  
}

#fader ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 300px;
  list-style: none;
}

#fader ul li {
  position: absolute;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

style.less

#fader {
  
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;  
  
  ul {
    position: relative;
    margin: 0;
    padding: 0;
    height: 300px;
    list-style: none;
    
    li {
      position: absolute;
      display: block;
      float: left;
      margin: 0;
      padding: 0;
      width: 500px;
      height: 300px;
      background: #ccc;
      text-align: center;
      line-height: 300px;
    }
    
  }
  
}