Tiny-slider: How do I create multiple instances of Tiny Slider?

Created on 11 Dec 2020  路  5Comments  路  Source: ganlanyuan/tiny-slider

import { tns } from "tiny-slider/src/tiny-slider";
tns({
        'slider1': {
                container: '.slider1',
                items: 4,
                controls: false,
                navPosition: "bottom",
                mouseDrag: true,
                autoplay: false,
                autoplayButtonOutput: false,
                // loop: false,
        },
        'slider2': {
                container: '.slider2',
                items: 3,
                slideBy: 'page',
                loop: false,
                startIndex: 6,
        },
});

Not working.
Help please...

Most helpful comment

And for several sliders with the same attributes, as @ausbran said:

document.querySelectorAll('.my-slider').forEach(slider => {
    tns({
        container: slider
        // options here
    });
});

All 5 comments

const tnsCarousel = document.querySelectorAll('.my-slider');
tnsCarousel.forEach(slider => {
const tnsSlider = tns({
container: slider
//*options here
});
});

It's hard for me to understand. Please write the finished code for two different sliders ...

import { tns } from "tiny-slider/src/tiny-slider";

const slider1 = tns({
    container: ".slider1",
    items: 4,
    controls: false,
    navPosition: "bottom",
    mouseDrag: true,
    autoplay: false,
    autoplayButtonOutput: false
});

const slider2 = tns({
    container: ".slider2",
    items: 3,
    slideBy: "page",
    loop: false,
    startIndex: 6
});

@jpsca, thank you very much! This code works for me:

import { tns } from "tiny-slider/src/tiny-slider";

if (document.querySelectorAll('.slider1').length > 0) {
    const slider1 = tns({
        container: ".slider1",
        items: 4,
        controls: false,
        navPosition: "bottom",
        mouseDrag: true,
        autoplay: false,
        autoplayButtonOutput: false
    });
}
if (document.querySelectorAll('.slider2').length > 0) {
    const slider2 = tns({
        container: ".slider2",
        items: 3,
        slideBy: "page",
        loop: false,
        startIndex: 6
    });
}

And for several sliders with the same attributes, as @ausbran said:

document.querySelectorAll('.my-slider').forEach(slider => {
    tns({
        container: slider
        // options here
    });
});
Was this page helpful?
0 / 5 - 0 ratings

Related issues

fritzmg picture fritzmg  路  4Comments

snnsnn picture snnsnn  路  3Comments

DimaGashko picture DimaGashko  路  3Comments

movationdesign picture movationdesign  路  5Comments

youradds picture youradds  路  3Comments