\documentclass[a4paper, 11pt]{article}
\renewcommand{\familydefault}{\sfdefault}
\usepackage{a4wide}
\usepackage[utf8]{inputenc}
\usepackage[ngerman]{babel}
\usepackage{color}
\usepackage{graphicx}
\usepackage{setspace}
\usepackage{ulem}
\usepackage{listings}
\usepackage{float}
\usepackage[rflt]{floatflt}
\usepackage{tabularx}
\setlength{\parindent}{0pt}
\title{Slider - Vanilla JS}
\usepackage[
pdftitle={Slider - Vanilla JS}
pdfsubject={JavaScript Slider, slided auf scroll Basis, daher minimaler JavaScript Aufwand}
pdfauthor={Udo Schmal}
pdfkeywords={Slider, JavaScript}
]{hyperref}
\definecolor{darkblue}{rgb}{0,0,.5}
\hypersetup{pdftex=true, colorlinks=true, breaklinks=true, linkcolor=darkblue, menucolor=darkblue, pagecolor=darkblue, urlcolor=darkblue}
\begin{document}Slider - Vanilla JS
\singlespacing
{\LARGE \textbf{\label{sec:title}Slider - Vanilla JS}}

\singlespacing
\textbf{horizontal Slider}

\begin{itemize}
\item 
\item 
\item 
\item 
\item 
\item 
\end{itemize}

\singlespacing
\textbf{horizontal Fader}

\begin{itemize}
\item 
\item 
\item 
\item 
\item 
\item 
\end{itemize}

\singlespacing
\textbf{vertical Slider}

\begin{itemize}
\item 
\item 
\item 
\item 
\item 
\item 
\end{itemize}

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 \&amp; 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.

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

\singlespacing
{\small \textbf{HTML:}}

\href{https://www.gocher.me/code/slider/slider.htm}{slider.htm}

\singlespacing
{\small \textbf{JavaScript:}}

\href{https://www.gocher.me/code/slider/slider.js}{slider.js}

\singlespacing
{\small \textbf{StyleSheet:}}

\href{https://www.gocher.me/code/slider/slider.css}{slider.css}
\end{document}