Elegant Slider v5.4

This JS/CSS module will generate a slider. You can choose between translate and fade animations and provide some other optionnal values. Clean infinite looping possible.
Compatible with touch events.
I tried my best to make it simple, robust and light-weighted (5.0kB for minified JS, 1.2 kB for minified CSS).
I provide it not minified though, so that you can tune it if you need to.

The structure is quite classic: an external wrapper, an internal wrapper that is responsible for slides animation, and the slides.

It has a slideChange event, and can be manipulated from outside (like slider.showSlide(3))

Steps

1. Copy and paste this HTML structure in your page. if you want a fade animation (instead of default translation animation), add 'fade-transition' class to 'slides-tape'. Keep these minimal CSS classes below.

<div class="slider-wrapper">
	<div class="slides-tape"> <!-- add fade-transition class if needed -->
		<div class="slide"></div>
		<div class="slide"></div>
		<div class="slide"></div>
	</div>
</div>

2. use slider.css file into your HTML page, either by copy-pasting it’s content on your own CSS file, or using a <link> tag.
3. In a module script, write the following :

import createSlider from './path/to/slider.js'
const mySliderWrapper = document.querySelector('.my-selector')
const mySlider = createSlider( mySliderWrapper, { /* options */} )

4. optionnal : if you need to control the slider from external commands (like thumb images), use const mySlider = createSlider(node, options). This way, you can execute slider commands from outside (typically my_slider.showSlide(x, isAnimated), where x is the slide number and isAnimated defaults to true).

• node is the HTML node that will be displayed as slider (with .slider-wrapper class).
• options is an object with the following entries. If some entries are missing, or if no object is given, it will use default values (see below).

Options

The given values are default values. If they suit your needs, you don’t need to specify them.

{  
	animationTiming: 200, // animation duration in ms (int),
	pauseTiming: 0 // slide display duration in ms (int, 0 → manual switch between slides),
	infiniteCycle: false, // infinite loop between slides (bool),
	showArrows: true, // show navigation arrows (bool),
	showDots: true, // show navgation dots (bool),
	showSlideNumber: false, // show slide number, eg. 2/15 instead of dots (bool). Prevails on showDots option
	preventTouchEvents: false // cancel all touch events, for full automatic slider
}

Notes

CSS is minimal. Feel free to tune it to your needs. Some parameters are generated by JS though. With fade animation, you have to set an height or an aspect ratio for sliderWrapper due to absolute positionning of slides. Default min-height: 10rem is given just for you to spot the slider if you forget to specify its height or its aspect-ratio.

Debugging

v0.5 : fixed bug when showArrows = false
v0.6 : improvement on z-index with fade animation
v0.7 : choice between dots and lines for dotLines content
v1.0 : resize slider dynamically on window resize event
v1.1 : delegate width and aspect ratio to CSS.
v1.2 : minor code improvements
v2.0 : algorithm change for infinite looping
v3.0 : HTML structure pre-writted to avoid flash on load. While JS is not loaded, the first slide will be correctly displayed.
v3.1 : accessibility improvements (aria-role and aria-label on JS generated commands)
v3.2 : minor improvment + show slide number option (like 2/15).
v4.0 : createSlider function returns the slider object, so it can be manipulated by external code. changeSlide event is fired when active slide changes. event.detail provide the new active slide number.
v4.1 : minor bug correction (allow touch event on arrows and dots)
v4.2 : better handling two fingers zoom event on touch screen
v5.0 : improved touch events handling. Minor CSS improvments
v5.2 : minor CSS/JS improvments
v5.3 : opacity minor bug corrected, displayed slide has class "active", to improve animation possibilities (not used by default), option to prevent touch events
v5.4 : better handling of swipe events after last slide or before first slide when not infinite