Tiny Content Slider with Pure JavaScript

Category: Javascript , Recommended , Slider | May 7, 2020
Author: ganlanyuan
Views Total: 1,621 views
Official Page: Go to website
Last Update: May 7, 2020
License: MIT


Tiny Content Slider with Pure JavaScript


A tiny yet feature-rich content slider built using pure JavaScript and plain Html / CSS.


  • Autoplay.
  • Navigation and pagination.
  • Infinite loop like a carousel.
  • Responsive design.
  • Multiple items in one slide.
  • Custom animations.
  • Keyboard navigation.

Basic usage:

Add the tiny-slider.css and tiny-slider.js to your webpages.

<link rel="stylesheet" href="assets/css/tiny-slider.css">
<script src="assets/js/tiny-slider.js"></script>

Add html content to the slider.

<div class="container">
  <div class="slider">
      <p>Slide 1</p>
      <p>Slide 2</p>
      <p>Slide 3</p>

Initialize the slider.

tns({container: '.container'});

Available customization options.

  container: '.slider',
  mode: 'carousel', // or 'gallery'
  axis: 'horizontal', // or 'vertical'
  items: 1,
  gutter: 0,
  edgePadding: 0,
  fixedWidth: false,
  slideBy: 1,
  controls: true,
  controlsText: ['prev', 'next'],
  controlsContainer: false,
  nav: true,
  navContainer: false,
  navAsThumbnails: false,
  arrowKeys: false,
  speed: 300,
  autoplay: false,
  autoplayTimeout: 5000,
  autoplayDirection: 'forward',
  autoplayText: ['start', 'stop'],
  autoplayHoverPause: false,
  autoplayButton: false,
  autoplayButtonOutput: true,
  autoplayResetOnVisibility: true,
  loop: true,
  rewind: false,
  autoHeight: false,
  responsive: false,
  lazyload: false,
  touch: true,
  mouseDrag: false,
  swipeAngle: 15,
  nested: false,
  freezable: true,
  onInit: false


v2.9.2 (05/07/2020)

  • Bugs fixed

v2.9.0 (12/14/2018)

  • update tests, fix a lazyload image issue, fix a transitionduration issue in IE

v2.8.8 (12/08/2018)

  • use static nav
  • fix getVisibleSlideRange()
  • fix autoHeight in edge
  • fix nav number

v2.8.7 (11/10/2018)

  • fix(api): Correct .x()/.xs() to work properly; vertical: fix slides width in some old browsers

v2.8.6 (09/08/2018)

  • update isVisible()

v2.8.5 (08/18/2018)

  • add tag “article” as slide

v2.8.4 (08/12/2018)

  • vertical mode: fix an issue in initialization

v2.8.3 (08/04/2018)

  • update

v2.8.2 (07/21/2018)

  • rm removeElementStyles.js, fix some “disable” related issues in resizeTasks()

v2.8.1 (07/14/2018)

  • update

v2.7.4 (07/08/2018)

  • update vertical slider classes

v2.7.3 (06/30/2018)

  • gallery: fix page overlapping when click nav, fix getImageArray() and getMaxSlideHeight()
  • fix an issue in navInit

v2.7.3 (06/24/2018)

  • gallery: fix page overlapping when click nav, fix getImageArray() and getMaxSlideHeight()

v2.7.2 (06/17/2018)

  • update has3D.js so that it can run in <head>

v2.7.1 (06/09/2018)

  • gallery mode: prevent touching/draging

v2.7.0 (06/02/2018)

  • gallery mode: prevent touching/draging

v2.6.0 (05/30/2018)

  • update touch variables

You Might Be Interested In:

3 thoughts on “Tiny Content Slider with Pure JavaScript

  1. Tomas

    Can anyone please tell me if its possible to have 2 items?
    Getting a:
    “items are not enough to show on 1 page” error

  2. Victor Stadnichenko

    I am unable to make this slider work. I tried 15 times. The working sample has too many pages with too much code – tl;dr. Simple instructions don’t work.


Leave a Reply