JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<tiny-slider ref="tinySlider" v-bind="tinySliderOptions" class="customize" id="customize">
  <div>
    <img src="https://source.unsplash.com/collection/993239/600x400" alt="" width="600" height="400" />
  </div>
  <div>
    <img src="https://source.unsplash.com/collection/1673600/600x400" alt="" width="600" height="400" />
  </div>
</tiny-slider>
<ul ref="sliderThumbs" class="thumbnails" id="customize-thumbnails">
  <li>
    <img src="https://source.unsplash.com/collection/993239/600x400" alt width="600" height="400" />
  </li>
  <li>
    <img src="https://source.unsplash.com/collection/1673600/600x400" alt width="600" height="400" />
  </li>
</ul>

JavaScript

var slider = tns({
    container: '.my-slider',
    items: 3,
    slideBy: 'page',
    autoplay: true
  });