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.
Manuelles Weiterschalten
Danke für den Tipp, habe diesen Slider nun schon mehrfach eingesetzt, nun kommen aber zwei Fragen auf: Lassen sich manuelle Weiterschalter integrieren (Bullets mit der Anzahl der Bilder)? Kann man irgendwie von Fade auf Slide umstellen?
Re: Manuelles Weiterschalten
Hallo COR9
Das ist sicher möglich. Dazu müsste das Javascript um weitere Funktionen ergänzt werden, welche das manuelle Sliden und die Art der Übergangs steuern.
In deinem Fall würde ich nicht lange versuchen das Script aufzubohren, sondern eher auf einen bewährten Slider zurückgreifen, welcher dir alle gewünschten Möglichkeiten bietet. Der oben genannte macht aus meiner Sicht nur Sinn, wenn möglichst spartanisch gearbeitet werden kann.