yaslider v0.2.3

Yet Another Slider (yas)

Very simple slider written in TypeScript, easy to set up. Here some examples.

Use

The center idea is that the slider will be inserted in a HTMLElement node selected. The elements of the slider will be (by default) the children nodes of the selected node.

Without a package manager

You can download the project in the workspace and:

<!-- Import the styles needed. -->
<link rel="stylesheet" href="yas/style.css">

<!-- mark the node where the slider will be with an id -->
<div id="slider_id">
    <!-- Every child will be a slider item. -->
    <div> first child </div>
    <div> second child </div>
    <div> 
        <p> child with an image </p>
        <img src="./testImg.jpg" /> 
    </div>
</div>
<!-- Slide manually -->
<button onclick="mySlider.SlideLeft()">Prev</button>
<button onclick="mySlider.SlideRight()">Next</button>

<script type="module">
    import { AddYasToID } from './yas/slider.js'

    // Create the slider in the HTMLElement with `slider_id` as id
    window.mySlider = AddYasToID('slider_id');
</script>

The slider will have by default the elements that the node with id equal (in this case) to slider_id has as children.

The slider can be created using AddYasToHTMLElement, passing directly the container Node.

Remember to import the CSS code (yas/style.css).

With NPM

npm install yaslider

then

import { 
    AddYasToID,
    AddYasToHTMLElement,
    YaSlider } from 'yaslider/slider'

Actions

Configuration

Method Chaining

let slider = AddYasToID('slider_id')
                .ChangeSpeedValues(10,0.5)
                .SetAmountOfElements(2)
                .SlowMovementOffset(100px)
                .SetSpecificAnimation("blur");

You can join the configurations chaining the methods when you create the slider using AddYasToID(), AddYasToHTMLElement() or initializing like new YaSlider()

Available configurations

We create some defaults animations like: default, opacity, up-down,blur and rotation, but the user can create their own animations following the structure defined by the animations in ./style.css.

Configuration object

You can configure the slider using a configuration object, using the methods AddYasToID() and AddYasToHTMLElement()

let slider=AddYasToID('slider_id',{
    amountElements:1,
    changeTime:2,
    startEndAnimationTime:0.8,
    initialAnimationDirection: 1,
    autoAnimation: true,
    slowMovementOffset: "20deg",
    animation:'rotation',
    animEveryItem: false 
})