Tiny Slider JS

Trying out this cool slider. Lotsa options

image 1
image 2
image 3
image 4
image 5
image 6

This was a bitch to work. The problem was the critical position of the script file. Not the head section, even with defer it didn't work..

It had to be below the HTML and above the script tags without the key word defer.

You might want to check out:

Both Glide and Keen Slider are are even tinier.

Good article on performance issues and using pure CSS instead.

const slider = tns({
    container: ".my-slider",
    items: 1,
    slideBy: "page",
    mouseDrag: true,
    swipeAngle: false,
    speed: 400, // transition speed
    autoplay: false,
    autoplayTimeout: 4000,
    controls: true,
    nav: true,
    controlsPosition: "bottom",
    mode: "carousel" // use gallery for fading
});