Tiggles ツ of Speak Creative
8/1/2019 - 12:31 PM

Matrix Tiny Slider Banner Rotator ( 🖼️. 🖼️)

Need an additional slider on the site? Full Height/width. Options for slide/fade, and transition time included. Uses Tiny Slider.

ie http://cloud.madebyspeak.com/a363a7 | https://www.stjohnsroanoke.org/admin/settings/sitewide-content.aspx?scph=8633#0

matrix-template.liquid
content_copyfile_download
{% assign items = List.Items %}
<div id="auto-slider">
   <ul>
      {% for Item in items %}
      {% if Item.FieldValues.Active %}
      <li>
         <img src="{{ Item.FieldValues.Image }}" alt="">
      </li>
      {% endif %}
      {% endfor %}
   </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.8/min/tiny-slider.js?ckcachebust=568244149"></script>

<script>

 
{% if Module.FieldValues.Transition == 'Slide' -%}
var slider = tns({
      container: '#auto-slider ul',
      items: 1,
      autoplay: true,
      stopOnHover: false,
      mouseDrag: false,
      controls: false,
      nav: false,
      touch: false,
      autoHeight: true,
      loop: true,
      autoplayButtonOutput: false,
      freezable: false,
      autoplayTimeout: {{ Module.FieldValues.SlideDelayTime }}000
   });

{% elsif Module.FieldValues.Transition == 'Fade' -%}
   var slider = tns({
      container: '#auto-slider ul',
      items: 1,
      autoplay: true,
      stopOnHover: false,
      mouseDrag: false,
      controls: false,
      nav: false,
      touch: false,
      autoHeight: true,
      loop: true,
      autoplayButtonOutput: false,
      freezable: false,
      autoplayTimeout: {{ Module.FieldValues.SlideDelayTime }}000,
      mode: "gallery"
   });

{% elsif Module.FieldValues.Transition == '' -%}
   var slider = tns({
      container: '#auto-slider ul',
      items: 1,
      autoplay: true,
      stopOnHover: false,
      mouseDrag: false,
      controls: false,
      nav: false,
      touch: false,
      autoHeight: true,
      loop: true,
      autoplayButtonOutput: false,
      freezable: false,
      autoplayTimeout: {{ Module.FieldValues.SlideDelayTime }}000,
   });
{% endif %}

$("body").addClass("active-autoslider");
</script>
matrix-head.html
content_copyfile_download
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.1/tiny-slider.css">