Web Components Library

Tiny Slider

  • Handle: @testing-tiny-slider
  • Preview:
  • Filesystem Path: components/10-other-examples/testing-playground/js-components/tiny-slider/tiny-slider.hbs 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css">

<div class="my-slider">
    <div><img src="https://source.unsplash.com/800x600/?camera" alt="Image 1"></div>
    <div><img src="https://source.unsplash.com/800x600/?apple" alt="Image 2"></div>
    <div><img src="https://source.unsplash.com/800x600/?space" alt="Image 3"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
  • Content: 
    var slider = tns({
    container: '.my-slider',
    items: 1,
    responsive: {
        640: {
            edgePadding: 20,
            gutter: 20,
            items: 2
        },
        700: {
            gutter: 30
        },
        900: {
            items: 3
        }
    }
});
  • URL: /components/raw/testing-tiny-slider/tiny-slider.js
  • Filesystem Path: components/10-other-examples/testing-playground/js-components/tiny-slider/tiny-slider.js
  • Size: 284 Bytes 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css">

<div class="my-slider">
  <div><img src="https://source.unsplash.com/800x600/?camera" alt="Image 1"></div>
  <div><img src="https://source.unsplash.com/800x600/?apple" alt="Image 2"></div>
  <div><img src="https://source.unsplash.com/800x600/?space" alt="Image 3"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
 
{
  "text1": null
}