Sehr einfache Slideshow mit Javascript und CSS

Vanilla Javascript und CSS

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 mit purem 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.

<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 selektiert die Elemente anhand der Klasse slides. Es müssen also keine Bilder sein, die in der Slideshow gezeigt werden, sondern die Slideshow kann auch für andere Elemente eingesetzt werden.

.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:

let count = 0;

const simpleSlides = function () {
    const slides = document.querySelectorAll(".slides");
    for (const item of slides) {
    	item.classList.remove ("animate-left")
    }
    count++;
    if (count > slides.length) { count = 1; }
    slides[count-1].classList.add("animate-left");
    setTimeout(simpleSlides, 3600);
}

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:

.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.

<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>

const simpleSlides = function (options) {
    const 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) {
    		const that = this,
    		interval = window.setInterval (function () {
    			that.showSlide(1);
    		},speed);
    	}
    }
    const slideshow = Object.create(Slideshow);
    console.log (slideshow)
    slideshow.init(options); 
}

const opts = {
	speed: 5000,
	animate: "animate-left"
}

simpleSlides(opts);

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