Tiny-slider: multiple instances

[timbakkum]

__Issue description__: Trying to initialise multple instances breaks slider. Is it possible to use a Nodelist somehow to initialise multiple instances with the same container classname in one go?

__Demo link/slider setting__:
` var productSlider;
productSlider = tns({
container: document.querySelectorAll('.products__contents'),
nav: false,
controls: false,
items: 1,
loop: true,
gutter: 10,
autoplay: true,
autoplayHoverPause: true,
autoplayButtonOutput: false,
mouseDrag: true,
edgePadding: false,
responsive: {

            480: {
                items: 2,
                gutter: 10,
            },
            992: {
                items: 3,
                gutter: 15,
            },
            1200: {
                items: 4,
                gutter: 15,
                autoplay: false
            }
        }
    });`

_Tiny-slider version_: 2.2.5

[shelldandy]

Yes its possible, make a querySelector and then loop them using this:
https://toddmotto.com/ditch-the-array-foreach-call-nodelist-hack/

Then you're done. I'm doing that right now on a real website, and works just fine

[shelldandy]

This is not an issue with the library, you gotta step up your vanilla js game (aka googling harder haha)

[timbakkum]

Thanks, I mistook Node for Nodelist in the documentation and already figured out a solution like the one you posted.

[ganlanyuan]

Glad you find a solution. 👍
Thanks @mike3run

I will check on my side to see if I can make it easier with nodeList.

[shelldandy]

@ganlanyuan maybe with some data-attributes like data-tiny-slider but i don't think its needed and adding code for such cases would only increase the overall size of the tiny slider

[ganlanyuan]

Hum, seems a little bit complex especially in case of customizing controls, nav or autoplayButton which I have to find these customized elements for each instance.

[daybugging]

@ganlanyuan any idea HOW one would find customised controls, buttons etc for each instance?
Or maybe @mike3run came up with something clever :question:

[S1SYPHOS]

@daybugging: "Step up your vanilla JS game":

<!-- Simply echo some kind of identifier / slug that's individual for each slider -->
<div class="slider" data-name="YOUR-SLUG">
  <div class="slide">
    <!-- images -->
  </div>
</div>
<div class="thumbnails-YOUR-SLUG">
  <!-- thumbnails -->
</div>

// forEach function from Todd Motto's  blog, as mentioned above
var forEach = function (array, callback, scope) {
  for (var i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i]); // passes back stuff we need
  }
};

// tiny-slider initialisation
var sliders = document.querySelectorAll('.slider');
forEach(sliders, function (index, value) {
  // now fetch YOUR-SLUG from html (use value.getAttribute('data-name') for < IE10 support)
  let thumbnail = value.dataset.name;
  let slider = tns({
    container: value,
    navContainer: '.thumbnails-' + thumbnail,
    navAsThumbnails: true,
    // more options ..
  });
});

.. and you should be fine. @ganlanyuan, maybe we could include this in an example section in README.md? I'll even send a PR :champagne:

[notrealdev]

Hi

"autoHeight": true

not working if I have more than one slider, can you check it? Error:

Uncaught TypeError: Cannot read property 'querySelectorAll' of undefined
https://github.com/ganlanyuan/tiny-slider/blob/master/dist/tiny-slider.js#L1774

[ganlanyuan]

Hi @notrealdev ,
I made a demo page with autoHeight: true and they work as expected: https://codepen.io/ganlanyuan/pen/GxEqJy?editors=1010