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/slidesjsimport 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 :