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...
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
});
});
Most helpful comment
And for several sliders with the same attributes, as @ausbran said: