A script easy to implement in own enviroment.
A Pen by Alexander Schmidt on CodePen.
<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> |
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); | |
}); | |
}); |
A script easy to implement in own enviroment.
A Pen by Alexander Schmidt on CodePen.
#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; | |
} |
#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; | |
} | |
} | |
} |