Slider - Vanilla JS

Slider - Vanilla JS

horizontal Slider

		* 
		* 
		* 
		* 
		* 
		* 

horizontal Fader

		* 
		* 
		* 
		* 
		* 
		* 

vertical Slider

		* 
		* 
		* 
		* 
		* 
		* 

Slider auf JavaScript Basis habe ich schon einige geschrieben, nun aber versuche ich es mit einem anderen Ansatz, für das Sliden möchte ich das über CSS gestaltete Scrollen nutzen, dadurch ist die Umsetzung der Touch- und Wheel-Events nicht erforderlich, da es im Standard schon funktioniert.

Als Methoden zur Animierung sollen dann zusätzlich zum Wischen und Mousewheel/Mouspad (2-Finger), noch Pfeile (vorwärts/rückwärts), Bubbes (Punkte zur Steuerung und Anzeige aktiver Slide) oder Thumbnails (Bilder zur Steuerung und Anzeige aktiver Slide) und eine Autoplay Funktion (optional mit Play & Pause Button).

Das Sliden soll in horizontaler aber auch vertikaler Richtung funktionieren und Hintergrund-Bilder unterstützen.

Für ältere Browser wie den Internet Explorer habe ich noch den smooth scroll über requestAnimationFrame realisiert.

		* class="slides" : assign this object
		* class="horizontal" : horizontal Slider
		* class="vertical" : vertical Slider
		* class="arrows-outside" : position of arrows outside the slider
		* class="fade" : use fading not slide to change item
		* class="ratio44" : use aspect ratio of 44%, for silder with no content only background images
		* data-options="bubbles" : display small active links (for example circles) for navigation
		* data-options="thumbs" : display small active thumbnails for navigation
		* data-options="arrows" : display arrows to navigate
		* data-options="autoplay" : use interval to change slide
		* data-options="play_pause" : display play/pause button to interrupt sliding
		* data-options="loop" : loop endless default disabled (on autoplay also loop is enabled)
		* data-interval="3000" : time for autoplay to move to next slide

HTML:

slider.htm("https://www.gocher.me/code/slider/slider.htm")

JavaScript:

slider.js("https://www.gocher.me/code/slider/slider.js")

StyleSheet:

slider.css("https://www.gocher.me/code/slider/slider.css")