Auf Stack Overflow habe ich vor kurzem einen einfachen Slider entdeckt. Der Slider nutzt jQuery ohne weitere Plugins.
<html>
<head>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: sans;
}
.track {
position: relative;
height: 400px;
width: 100%;
}
.slide {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.ipsum {
display: inline-block;
padding: 10px;
background-color: rgba(255, 255, 255, .75);
}
</style>
</html>
<body>
<div class="jCaroFade track">
<!-- Slides -->
<div class="slide" style="background-image:url('https://c1.staticflickr.com/1/550/20180902929_88c507f552_h.jpg');">
<p class="ipsum">SLIDE ONE</p>
</div>
<div class="slide" style="background-image:url('https://c1.staticflickr.com/1/277/19726574813_cf2aa22221_b.jpg');">
<p class="ipsum">SLIDE TWO</p>
</div>
<div class="slide" style="background-image:url('https://c1.staticflickr.com/1/488/20178281609_c1e34be0b2_b.jpg');">
<p class="ipsum">SLIDE THREE</p>
</div>
<div class="slide" style="background-image:url('https://c1.staticflickr.com/1/414/19744665244_c099ce816c_h.jpg');">
<p class="ipsum">SLIDE FOUR</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>$('.jCaroFade').each(createFader);
function createFader(i, elem) {
var track = $(elem);
var firstSlide = track.find('.slide').eq(0);
var loop = 0;
firstSlide.nextAll().hide();
setInterval(function() {
loop++;
firstSlide = firstSlide.fadeOut(500, function() {
$(this).appendTo(track);
})
.next()
.fadeIn(500);
}, 3000);
}
</script>
</body>
</html>Eine Demo des Sliders kann auf jsFiddle angeschaut werden.