Tiggles ツ
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">
    <ul class="slider-container">
        {% assign items = List.Items %}
        {% for Item in items %}
        <li class="slider">
            <div class="image"><img src="{{ Item.FieldValues.Image1 }}" alt=""></div>
            {% if Item.FieldValues.Image2 %}
            <div class="image"><img src="{{ Item.FieldValues.Image2 }}" alt=""></div>
            {% endif -%}
            {% if Item.FieldValues.Image3 %}
            <div class="image"><img src="{{ Item.FieldValues.Image3 }}" alt=""></div>
            {% endif -%}
            {% if Item.FieldValues.Image4 %}
            <div class="image"><img src="{{ Item.FieldValues.Image4 }}" alt=""></div>
            {% endif -%}
        </li>
        {% endfor %}

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