Awesome vanilla javascript slider for all purposes

A tiny slider for all purposes. This tiny-slider only works with static content and it works in the browser. If you are loading the html dynamically, make sure to call tns() after its loading. On this version using % instead of px
and CSS Mediaqueries if supported

Please follow the below steps
1. Add the below css into head (and IE8 polyfills if needed)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.1/tiny-slider.css">
<!--[if (lt IE 9)]><script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.1/min/tiny-slider.helper.ie8.js"></script><![endif]-->

2. The HTML markup

<div class="my-slider">
  <div></div>
  <div></div>
  <div></div>
</div>
<!-- or ul.my-slider > li -->

3. Initialize tns()

Add tiny-slider.js to footer of your page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.1/min/tiny-slider.js"></script>
<!-- NOTE: prior to v2.2.1 tiny-slider.js need to be in <body> -->

Follow the below given Responsive options

The following options can be redefined in responsive field:
startIndex,
items,
slideBy,
speed,
autoHeight,
fixedWidth,
edgePadding,
gutter,
center,
controls,
controlsText,
nav,
autoplay,
autoplayHoverPause,
autoplayResetOnVisibility,
autoplayText,
autoplayTimeout,
touch,
mouseDrag,
arrowKeys,
disable

Sample code

<script>
  var slider = tns({
    container: '.my-slider',
    items: 1,
    responsive: {
      640: {
        edgePadding: 20,
        gutter: 20,
        items: 2
      },
      700: {
        gutter: 30
      },
      900: {
        items: 3
      }
    }
  });
</script>

Read More Demo