How do I create multiple instances of Tiny Slider?

[kostyasorokin]

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

[ausbran]

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

[kostyasorokin]

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

[jpsca]

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

[kostyasorokin]

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

[jpsca]

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

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

[csakiistvan]

@jpsca thanks, it is working.

[rajneeshjoshi4]

@jpsca @ausbran Thanks, just adding the jQuery way with each and this.

var $tnsCarousel = $('.my-slider');
      $tnsCarousel.each(function() {
          var tnsSlider = tns({
             container: this,
             // options here
         });
});

[ridwanzal]

@jpsca @ausbran Thanks, just adding the jQuery way with each and this.

var $tnsCarousel = $('.my-slider');
      $tnsCarousel.each(function() {
          var tnsSlider = tns({
             container: this,
             // options here
         });
});

Do you really could implement this with jquery ?

[muhammadabir64]

@jpsca thank you so much brother..... I was very confused! but finally your method worked

[h-escobar]

Hi there. The solutions provided here worked perfectly with each slider placed on the same page. As I'm pretty new to JS, I'm wondering how that would work with the carousel indicators .slide__nav, because each time an item from slider 1 is selected the ones from slides 2 and 3 move simultaneously. Thanks.

[JoBoSo]

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

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

How can I build on this to deal with a controlsContainer? Say each of my sliders has a controls container with id="controls". Thanks!

Update: I did it like this, where the number of .slider, #controls, .previous, and .next are equal,

let sliders = document.querySelectorAll('.slider');
let controls = document.querySelectorAll('#controls');
let previous = document.querySelectorAll('.previous');
let next = document.querySelectorAll('.next');
for (let i = 0; i < sliders.length; i++) {
  tns({
    container: sliders[i],
    controlsContainer: controls[i],
    prevButton: previous[i],
    nextButton: next[i],
    ...
  });
};