Smooth Slider

An Awesome Slider to extend for every need.

Usage

new SmoothSlider(document.querySelector('.slider'), {
	autoplay: true,
	gap: '4rem',
});

Default Parametes

var defaultParmas = {
	autoplay: false, // boolean: Autopaly on or off
	autoplayDuration: 2500, // int: Duration between autoplay slides, set in ms
	autoplayDirection: 'forwards', // string ('forwards', 'backwards'): direction in which autoplay is sliding
	vertical: false, // boolean: weahter or not the slider is vertical orientated
	autoHeight: false, // boolean | nummeric: determents the height of the slider
	center: true, // boolean | string ('horizontal', 'vertical'): wheater the slides should be centered
	infinit: true, // boolean: enables endles sliding
	slidesToShow: 1, // int: number of slides that fit in view
	slidesToScroll: 1, // int: number of slides that the slider advances by
	startAt: 1, // int: the slide on wich to start on in view
	transition: 'slide', // string ('slide', 'fade'): transition style // TODO: add more, optional callback
	transitionDuration: 500, // int | string (css): the Duration of the Transiton
	transitionFunction: 'ease-in-out', // string (css): transition function such as: 'linear', 'ease' or 'cubic-bezier(.17,.67,.83,.67)' => https://cubic-bezier.com
	gap: 0, // int | string (css): gap between slides
	controlsContainer: false, // node: the node element in wich to place the controlls (dots, arrows)
	dots: true, // boolean | node: wheater to show dots, or the element in which to place the dots
	arrows: true, // boolean | Object{prev: node, next: node}: heater to show arrows, or an object with the elements to use as arrows
	scroll: false, // boolean: wheater a scrollEvent will trigger a transition // WARNING: disables scrolling the Page when over slider
	touch: true, // boolean: wheater a touchEvent (swipe) will trigger a transition
	mouse: true, // boolean: wheater a the mouse can swipe and trigger a transition
	keys: true, // boolean: enables keyboard controlls
};