html 微小滑块的多个实例

Posted 2021-05-10

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

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