CSS, HTML und Javascript mit {stil}

Sehr einfache Slideshow mit Javascript und CSS

Einfache Slideshow – Vanilla Javascript

Slideshows sind für viele Webseiten ein unverzichtbarer Teil des Layouts. Es gibt sie in unzähligen Variationen zum freien Download, aber fast immer bringen sie aufwändige CSS-Dateien und ebenso aufwändige Scripte mit.

Hier wirkt eine stark abgespeckte Form einer Slideshow ohne jQuery: Dabei hat die Slideshow schon ihre eigenen Variationen zu bieten: Slide in from top, from bottom, from left ….

Vanilla Javascript ist der Ausdruck für Javascript ohne den Overhead von jQuery. Dank CSS3 und Javascript-Methoden wie querySelector und querySelectorAll (die ähnlich funktionieren wie das famose $ von jQuery) setzen wir mit wenigen Anweisungen Effekte in die Webseite.

Do it yourselft-Slideshow in Vanilla Javascript:

HTML und CSS für die Slideshow

Ohne Javascript sind die Bilder durch display:none ausgeschaltet. Damit ein Browser bei deaktiviertem Javascript etwas anzuzeigen hat, sollte noch ein Hintergrundbild eingesetzt werden.

HTML für die Slideshow
<div class="simpleSlides">
  <img class="slides animate-left" src="slide-1.jpg">
  <img class="slides animate-left" src="slide-2.jpg">
  <img class="slides animate-left" src="slide-3.jpg">
  <img class="slides animate-left" src="slide-4.jpg">
</div>

Das Script wird die Elemente anhand der Klasse slides heraussuchen. Es müssen also keine Bilder sein, die in der Slideshow gezeigt werden, sondern die Slideshow kann auch für andere Elemente eingesetzt werden.

CSS für die Slideshow
.slides {
  display: none;
  width: 100%;
}

.animate-left {
  position: relative;
  animation: animateleft 0.8s
}

@keyframes animateleft { 
  from { left :-500px; opacity:0 } to { left:0; opacity:1 }
}

Das ist schon das komplette CSS für eine Slideshow, die ihre Elemente von Links nach Rechts einspielt. Die Slideshow ist dank width:100% responsive, wenn für img im CSS img { width: 100%, height: auto} gesetzt ist.

Das Slideshow-Script

Das Script ist genauso kurz:

CSS-Eigenschaften für LB-Shade und Bilder
var simpleSlides = function () {
    var i;
    var slides = document.querySelectorAll(".slides");
    for (i = 0; i < slides.length; i++) {
      slides[i].setAttribute("style","display:none");
    }
    count++;
    if (count > slides.length) { count = 1; }
    slides[count-1].setAttribute("style","display:block");
    setTimeout(simpleSlides, 3600);
}

var count = 0;
simpleSlides();

Das Skript sammelt mit document.querySelectorAll alle Elemente mit class="slides".

  • Im ersten Schritt werden alle Elemente auf display:none gesetzt, bevor das nächste Bild eingeschoben wird,
  • dann der Counter um 1 hochgezählt,
  • das nächste slides-Element wird mit ("style","display:block") sichtbar gemacht,
  • setTimeout setzt das Script für 3600 Millisekunden aus, bevor simpleSlides erneut aufgerufen wird.

Weil var slides = document.querySelectorAll(".slides") eine Sammlung aller Elemente anlegt, kann die einfache Slideshow beliebig viele Bilder (oder andere Elemente) enthalten.

Das Script ist kiki und ausgesprochen einfach gehalten – es ist nur ein Einstieg. Die Arbeit wird vom CSS erledigt. Wenn die Slides von unten nach oben erscheinen sollen, muss nur das CSS für die Animation leicht abgeändert werden.

.animate-bottom {
	position:relative;
	animation:animatebottom 0.8s
}

@keyframes animatebottom { 
	from { bottom:-500px; opacity:0 } to { bottom:0; opacity:1 }
}

Slideshow als Javascript Object

Eine Slideshow mit Optionen ist aufwändiger, so dass sich ein Javascript-Object lohnt. Ein Slideshow-Object ist flexibler und lässt sich durch Optionen steuern.

Das CSS braucht nur eine kleine Änderung:

CSS für das Slideshow-Objekt
.slides {
  display:none;
  width: 100%;
  max-width: 620px;
  margin:1em auto;
}

.animate-top {
  display: block;
  position:relative;
  animation:animatetop 1s
}

@keyframes animatetop { 
  from { top:-300px; opacity: 0 } to { top:0; opacity:1 } 
}

Nach demselben Schema können weitere Animationen für den Übergang von einem Bild zum nächsten angelegt werden:

  • animate-top
  • animate-bottom
  • animate-left
  • animate-right
  • animate-zoom

Die Namen der Klassen werden gleich als Option in den Aufruf des Scripts eingesetzt.

Das HTML wird einen Tick einfacher, denn die Klassen für die CSS-Animation werden später beim Aufruf des Scripts als Option eingesetzt.

HTML für die Slideshow
<div class="simpleSlides">
  <img class="slides" src="slide-1.jpg">
  <img class="slides" src="slide-2.jpg">
  <img class="slides" src="slide-3.jpg">
  <img class="slides" src="slide-4.jpg">
</div>
Lightbox-Script
var simpleSlides = function (options) {
  var Slideshow = {
    init: function (options) {
      this.count = 0;
      this.slides = document.querySelectorAll(".slides");
      this.numslides = this.slides.length;
      options = options || {};
      this.opts = {
        speed:(typeof options.speed === "undefined") ? 3600 : options.speed,
        animate:(typeof options.animate === "undefined") ? "animate-bottom" : options.animate
      }
      this.slides[0].classList.add(this.opts.animate);
      this.autoCycle(this.opts.speed)
    },
    showSlide: function (i) {
      if (i>0) {
        this.count = (this.count + 1 === this.numslides) ? 0 : this.count + 1;
      } else {
        this.count = (this.count -1 < 0) ? this.numslides - 1 : this.count - 1;
      }
      document.querySelector("." + this.opts.animate).classList.remove(this.opts.animate);
      this.slides[this.count].classList.add(this.opts.animate);
    },
    autoCycle: function (speed) {
      var that = this,
      interval = window.setInterval (function () {
        that.showSlide(1);
      },speed);
    }
  }
  var slideshow = Object.create(Slideshow);
  slideshow.init(options); 
}

var opts = {
  speed: 5000,
  animate: "animate-top"
}
simpleSlides(opts);

Object.create() erstellt eine neues Objekt. Diese Variante bietet den Freiraum, weitere Optionen aufzunehmen – z.B. ein "pause on hover".