Tiny-slider: Multiple sliders with custom controlContainer

[b3nhartl3y]

Hello all,

I've currently got this to work for multiple tiny sliders on one page, however I'm using a custom control container, any thoughts to how I can get this to work with multiple control containers?

var sliders = document.querySelectorAll('.slider--standard');
forEachSlider(sliders, function (index, value) {
    let slider = tns({
        container: value,
        items: 1,
        slideBy: 'page',
        controlsContainer: "#customize-controls"
    });
});

Many thanks.

[arnisjuraga]

Hi,
and what was your solution?

[MrkKr]

Could you share the solution?

[MrkKr]

@arnisjuraga OK, I got it. First you have to catch the container above the slider and then define the variables inside:

const productCatsCarouselInit = () => {
  const productCatsSlider = document.querySelectorAll('.productCatsCarousel'); // container above slider
  productCatsSlider.forEach(sliderWrapper => {
    const slider = sliderWrapper.querySelector('.productCatsCarousel__slider'); // container with slider
    const navContainer = sliderWrapper.querySelector('.productCatsCarousel__thumbs');
    const controlsContainer = sliderWrapper.querySelector('.productCatsCarousel__controls');
    const catSlider = tns({
      container: slider,
      items: 1,
      slideBy: 'page',
      autoplay: false,
      autoplayButtonOutput: false,
      autoplayResetOnVisibility: false,
      mouseDrag: true,
      autoHeight: true,
      lazyload: true,
      navContainer: navContainer,
      navAsThumbnails: true,
      controlsContainer: controlsContainer
    });
  });
};
if (document.querySelectorAll('.productCatsCarousel')) {
  productCatsCarouselInit();
}