Tiggles ツ of Speak Creative
3/18/2019 - 3:31 PM

Multiple Instances of Tiny Sliders

If using Matrix, the container for sliders will have same class. This snippet will allow for all the classes to be able to inherit the slider rules.

code.liquid
content_copyfile_download
<div id="image-grid">
    <div class="slider-container">
       <ul class="slider">
          {% for Item in List.Items %}
            <li></li>
            <li></li>
            <li></li>
          {% endfor %}
        </ul>
        <ul class="slider">
          {% for Item in List.Items %}
            <li></li>
            <li></li>
            <li></li>
          {% endfor %}
        </ul>
    </ul>

</div>
body.html
content_copyfile_download
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.1/min/tiny-slider.js"></script>

<script>
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
  }
};
var sliders = document.querySelectorAll('.slider');
forEach(sliders, function (index, value) {
      var slider = tns({
        container: value,
        items: 1,
        slideBy: 'page',
        autoplay: true,
        controls: false,
        nav: false,
        autoplayHoverPause: true,
        autoplayButtonOutput: false
      });
});
</script>