@azenox/slidesjs

SlidesJS

Improved Slides functions from JQuery to pure Javascript

Getting Started

Demo: https://dev.alexishayat.me/SlidesJS/demo/demo.html

Install

Get it via NPM

npm install @azenox/slidesjs

import SlidesJS from "@azenox/slidesjs/SlidesJS.module.js";

Or just download the file and import it

<script src="path/to/SlideJS.js"></script>

Using Class

Here is a basic usage using SlidesJS class.

index.html :

<div id="div">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

app.js :

window.addEventListener('load', () => {
    const div = document.querySelector('#div');
    
    let slides = new SlidesJS(div);
    slides.slideToggleY(400, 'top');
});

Methods

Name	Attributes	Default Value	Values	description
.slideToggleY()	duration	500 (ms)	0 - Infinity (in ms)	Set animation duration
	origin	top	top, bottom	Set animation duration
	from	0	Between 0 and 1	Minimum scale size
	to	1	Between 0 and 1	Maximum scale size
.slideToggleX()	duration	500 (ms)	0 - Infinity (in ms)	Set animation duration
	origin	left	left, right	Set animation duration
	from	0	Between 0 and 1	Minimum scale size
	to	1	Between 0 and 1	Maximum scale size
.slideUp()	duration	500 (ms)	0 - Infinity (in ms)	Set animation duration
	origin	top	top, bottom	Set animation duration
	from	0	Between 0 and 1	Minimum scale size
	to	1	Between 0 and 1	Maximum scale size
.slideDown()	duration	500 (ms)	0 - Infinity (in ms)	Set animation duration
	origin	top	top, bottom	Set animation duration
	from	0	Between 0 and 1	Minimum scale size
	to	1	Between 0 and 1	Maximum scale size
.slideLeft()	duration	500 (ms)	0 - Infinity (in ms)	Set animation duration
	origin	left	left, right	Set animation duration
	from	0	Between 0 and 1	Minimum scale size
	to	1	Between 0 and 1	Maximum scale size
.slideRight()	duration	500 (ms)	0 - Infinity (in ms)	Set animation duration
	origin	left	left, right	Set animation duration
	from	0	Between 0 and 1	Minimum scale size
	to	1	Between 0 and 1	Maximum scale size

Using Functions

You can use it using function too. But you need to use the other file (npm includes it too):

<script src="path/to/SlideJSFunctions.js"></script>

Here is the same example with functions:

index.html :

<div id="div">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

app.js :

window.addEventListener('load', () => {
    const div = document.querySelector('#div');

    window.addEventListener('load', () => {
        slideToggleY(div, 400, 'top');
    });
});

Methods

Name	Attributes	Default Value	Values	description
slideToggleY()	el	none	A HTML Element	The target element
	duration	500 (ms)	0 - Infinity (in ms)	Set animation duration
	origin	top	top, bottom	Set animation duration
	from	0	Between 0 and 1	Minimum scale size
	to	1	Between 0 and 1	Maximum scale size
slideToggleX()	el	none	A HTML Element	The target element
	duration	500 (ms)	0 - Infinity (in ms)	Set animation duration
	origin	left	left, right	Set animation duration
	from	0	Between 0 and 1	Minimum scale size
	to	1	Between 0 and 1	Maximum scale size
slideUp()	el	none	A HTML Element	The target element
	duration	500 (ms)	0 - Infinity (in ms)	Set animation duration
	origin	top	top, bottom	Set animation duration
	from	0	Between 0 and 1	Minimum scale size
	to	1	Between 0 and 1	Maximum scale size
slideDown()	el	none	A HTML Element	The target element
	duration	500 (ms)	0 - Infinity (in ms)	Set animation duration
	origin	top	top, bottom	Set animation duration
	from	0	Between 0 and 1	Minimum scale size
	to	1	Between 0 and 1	Maximum scale size
slideLeft()	el	none	A HTML Element	The target element
	duration	500 (ms)	0 - Infinity (in ms)	Set animation duration
	origin	left	left, right	Set animation duration
	from	0	Between 0 and 1	Minimum scale size
	to	1	Between 0 and 1	Maximum scale size
slideRight()	el	none	A HTML Element	The target element
	duration	500 (ms)	0 - Infinity (in ms)	Set animation duration
	origin	left	left, right	Set animation duration
	from	0	Between 0 and 1	Minimum scale size
	to	1	Between 0 and 1	Maximum scale size

Versions

Latest version :