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

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.

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).

npm install yaslider

then

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

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()

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.

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 
})