Anleitung für einen einfachen Bilder-Slider mit jQuery: zwanzig12 webdesign

Anleitung für einen einfachen Bilder-Slider mit jQuery

Um einen effektvollen Slider, beispielsweise für den Header einer Website zu erstellen, braucht es keine zusätzlichen CSS-Bibliotheken, Plugins oder sonstiges. Das ganze lässt sich mit ein paar Zeilen HTML / CSS / jQuery bewerkstelligen. Zunächst einmal legen wir das gewünschte HTML-Element an, welches die Slider beherbergen soll:

HTML

<section id="header_new"></section>

Im CSS definieren wir Abmessungen und Abstände des Containers und verpassen dem ganzen das initiale Hintergrundbild. background-size:cover sorgt dafür, dass der Container mit dem Hintergrundbild komplett ausgefüllt wird.

CSS

#header_new {
  position:relative;
  height:550px;
  margin-top:85px;
  max-height:550px !important;
  background-size:cover;
  background-image: url("../assets/images/headerslider/header1.jpg");
}

Das JavaScript tauscht nun zeitgesteuert (hier alle 4000 ms) das Hintergrundbild des Containers aus. Dabei fadet das bestehende erst aus und dann das neue Hintergrundbild ein. Mit welcher Geschwindigkeit das jeweils passiert kann mit den Werten in Klammern bei fadeIn(600) und fadeOut(200) gesteuert werden.

Wichtig ist, dass Ihr nach dem letzten Bild wieder das erste einsetzt, damit der Prozess von vorne beginnt.

JavaScript

$(document).ready(function() {  
  setInterval(function(){
    if(($("#header_new").css('background-image')).indexOf("header1.jpg") != -1){
          $("#header_new").css('background-image','url("assets/images/headerslider/header1.jpg")').fadeOut(200, function() {
            $("#header_new").css('background-image','url("assets/images/headerslider/header2.jpg")');
          }).fadeIn(600);
        }  
        if(($("#header_new").css('background-image')).indexOf("header2.jpg") != -1){
          $("#header_new").css('background-image','url("assets/images/headerslider/header2.jpg")').fadeOut(200, function() {
          $("#header_new").css('background-image','url("assets/images/headerslider/header3.jpg")');
          }).fadeIn(600);
        }
        if(($("#header_new").css('background-image')).indexOf("header3.jpg") != -1){
          $("#header_new").css('background-image','url("assets/images/headerslider/heade3.jpg")').fadeOut(200, function() {
          $("#header_new").css('background-image','url("assets/images/headerslider/header1.jpg")');
          }).fadeIn(600);
       }    
  }, 4000);
});

Ihr seht schon, es ist nicht im eigentlichen Sinne ein Slider, sondern ein quasi ein "Fader". Dennoch ergibt sich hier mit wenig Aufwand ein netter Effekt. Viel Spaß beim Nachmachen!

BLEIBEN SIE INFORMIERT!

Anleitung für einen einfachen Bilder-Slider mit jQuery