Quickstart

This guide will walk you through creating a basic slider from scratch. By the end, you’ll have a fully functional, responsive slider with navigation controls.

Complete Example

Create the HTML structure

First, create a container element with slides inside:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Tiny Slider</title>
  
  <!-- Tiny Slider CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
  
  <style>
    .my-slider {
      background: #f5f5f5;
    }
    .my-slider div {
      padding: 50px;
      text-align: center;
      background: #fff;
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <div class="my-slider">
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
    <div>Slide 4</div>
    <div>Slide 5</div>
  </div>
  
  <!-- Scripts will go here -->
</body>
</html>

You can use either <div> elements or <ul> with <li> items for your slides. Both work equally well.

Include the JavaScript

Add the Tiny Slider script before the closing </body> tag:

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

Initialize the slider

Call the tns() function with your configuration:

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

Full Working Example

Here’s the complete code combined:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Tiny Slider</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
  
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 1200px;
      margin: 50px auto;
      padding: 0 20px;
    }
    .my-slider div {
      padding: 80px 20px;
      text-align: center;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      font-size: 24px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>My First Tiny Slider</h1>
  
  <div class="my-slider">
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
    <div>Slide 4</div>
    <div>Slide 5</div>
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
  <script>
    var slider = tns({
      container: '.my-slider',
      items: 3,
      slideBy: 'page',
      autoplay: true,
      speed: 400,
      autoplayButtonOutput: false,
      mouseDrag: true,
      nav: false,
      controlsText: ['←', '→']
    });
  </script>
</body>
</html>

Import Methods

Depending on your project setup, you can initialize Tiny Slider in different ways:

CDN (Global Variable)
ES6 Module (Webpack/Rollup)
Native ES6 Module

When using the CDN version, tns is available globally:

<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
<script>
  var slider = tns({
    container: '.my-slider',
    items: 3,
    slideBy: 'page',
    autoplay: true
  });
</script>

Import tns in your JavaScript file when using a bundler:

// app.js
import { tns } from 'tiny-slider/src/tiny-slider';

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

Don’t forget to import the CSS in your main file or HTML:

import 'tiny-slider/dist/tiny-slider.css';

Modern browsers support ES6 modules directly (v2.8.2+):

<script type="module">
  import { tns } from './node_modules/tiny-slider/src/tiny-slider.js';
  
  const slider = tns({
    container: '.my-slider',
    items: 3,
    slideBy: 'page',
    autoplay: true
  });
</script>

Common Configuration Options

Here are the most commonly used options from the source code:

Basic Options

var slider = tns({
  // Container element (required)
  container: '.my-slider',
  
  // Number of slides visible at once
  items: 3,
  
  // How many slides to move at a time
  slideBy: 1, // or 'page' to slide by the number of visible items
  
  // Space between slides (in pixels)
  gutter: 20,
  
  // Space on the outside (in pixels)
  edgePadding: 0,
  
  // Animation speed (in milliseconds)
  speed: 300
});

var slider = tns({
  container: '.my-slider',
  items: 3,
  
  // Show prev/next buttons
  controls: true,
  
  // Customize button text
  controlsText: ['Previous', 'Next'],
  
  // Show navigation dots
  nav: true,
  
  // Enable keyboard arrow keys
  arrowKeys: true
});

Autoplay

var slider = tns({
  container: '.my-slider',
  items: 3,
  
  // Enable autoplay
  autoplay: true,
  
  // Time between slides (in milliseconds)
  autoplayTimeout: 5000,
  
  // Direction: 'forward' or 'backward'
  autoplayDirection: 'forward',
  
  // Pause on hover
  autoplayHoverPause: true,
  
  // Show autoplay button
  autoplayButtonOutput: true,
  
  // Customize button text
  autoplayText: ['Start', 'Stop']
});

Responsive Configuration

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

Breakpoints behave like CSS min-width media queries. Undefined options inherit from smaller breakpoints.

Touch & Drag

var slider = tns({
  container: '.my-slider',
  items: 3,
  
  // Enable touch for mobile
  touch: true,
  
  // Enable mouse drag for desktop
  mouseDrag: true,
  
  // Swipe angle threshold (in degrees)
  swipeAngle: 15
});

Real-World Example: Image Gallery

Here’s a practical example with images:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Gallery</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
  
  <style>
    .image-gallery {
      max-width: 1000px;
      margin: 50px auto;
    }
    .image-gallery img {
      width: 100%;
      height: 400px;
      object-fit: cover;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="image-gallery">
    <div><img src="https://picsum.photos/800/400?random=1" alt="Slide 1"></div>
    <div><img src="https://picsum.photos/800/400?random=2" alt="Slide 2"></div>
    <div><img src="https://picsum.photos/800/400?random=3" alt="Slide 3"></div>
    <div><img src="https://picsum.photos/800/400?random=4" alt="Slide 4"></div>
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
  <script>
    var slider = tns({
      container: '.image-gallery',
      items: 1,
      slideBy: 'page',
      autoplay: true,
      autoplayButtonOutput: false,
      autoplayTimeout: 3000,
      speed: 600,
      controls: true,
      nav: true,
      mouseDrag: true,
      loop: true,
      responsive: {
        768: {
          items: 2,
          gutter: 20
        }
      }
    });
  </script>
</body>
</html>

Accessing Slider Information

You can get information about the slider state:

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

// Get slider info
var info = slider.getInfo();
console.log('Current index:', info.index);
console.log('Total slides:', info.slideCount);
console.log('Visible items:', info.items);

The getInfo() method returns an object with:

container: The slider container element
slideItems: Array of all slide elements
index: Current slide index (zero-based)
displayIndex: Display index (starts from 1)
items: Number of visible items
slideCount: Total number of slides
controls: Whether controls are enabled
navContainer: Navigation container element
And more…

Controlling the Slider

You can programmatically control the slider:

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

// Go to a specific slide
slider.goTo(2); // Go to slide 3 (zero-based index)
slider.goTo('prev'); // Go to previous slide
slider.goTo('next'); // Go to next slide
slider.goTo('first'); // Go to first slide
slider.goTo('last'); // Go to last slide

// Control autoplay
slider.play(); // Start autoplay
slider.pause(); // Pause autoplay

// Other methods
slider.updateSliderHeight(); // Update height when autoHeight is true
slider.refresh(); // Refresh slider
slider.destroy(); // Destroy the slider
slider = slider.rebuild(); // Rebuild after destroying

Listening to Events

You can hook into slider events:

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

// Define a callback function
function onSlideChange(info) {
  console.log('Slide changed to index:', info.index);
  console.log('Display index:', info.displayIndex);
}

// Subscribe to events
slider.events.on('indexChanged', onSlideChange);
slider.events.on('transitionStart', function(info) {
  console.log('Transition started');
});
slider.events.on('transitionEnd', function(info) {
  console.log('Transition ended');
});

// Unsubscribe from an event
slider.events.off('indexChanged', onSlideChange);

Available events:

indexChanged: When the slide index changes
transitionStart: When a transition starts
transitionEnd: When a transition ends
touchStart, touchMove, touchEnd: Touch events
dragStart, dragMove, dragEnd: Drag events
newBreakpointStart, newBreakpointEnd: Responsive breakpoint changes

Troubleshooting

Slider not displaying

Make sure you:

Included the CSS file
Have at least 2 slides in your container
Called tns() after the DOM is loaded
Used the correct container selector

// Wait for DOM to load
document.addEventListener('DOMContentLoaded', function() {
  var slider = tns({
    container: '.my-slider',
    items: 3
  });
});

Dynamic content not working

If you’re loading content via AJAX, initialize the slider after the content loads:

fetch('/api/slides')
  .then(response => response.json())
  .then(data => {
    // Add slides to container
    const container = document.querySelector('.my-slider');
    data.forEach(slide => {
      const div = document.createElement('div');
      div.textContent = slide.content;
      container.appendChild(div);
    });
    
    // Initialize slider after content is loaded
    const slider = tns({
      container: '.my-slider',
      items: 3
    });
  });

IE8 not working

Don’t forget to include the IE8 helper polyfills:

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

Next Steps

Now that you have a working slider, explore more advanced features:

Configuration Options

Explore all available configuration options

API Methods

Learn about all methods and events

Examples

Browse practical examples and use cases

Styling Guide

Customize the appearance of your slider

Get Started

Core Concepts

Guides

Complete Example

Full Working Example

Import Methods

Common Configuration Options

Basic Options

Navigation & Controls

Autoplay

Responsive Configuration

Touch & Drag

Real-World Example: Image Gallery

Accessing Slider Information

Controlling the Slider

Listening to Events

Troubleshooting

Next Steps

Configuration Options

API Methods

Examples

Styling Guide

Build docs developers (and LLMs) love

Get Started

Core Concepts

Guides

​Complete Example

​Full Working Example

​Import Methods

​Common Configuration Options

​Basic Options

​Navigation & Controls

​Autoplay

​Responsive Configuration

​Touch & Drag

​Real-World Example: Image Gallery

​Accessing Slider Information

​Controlling the Slider

​Listening to Events

​Troubleshooting

​Next Steps

Configuration Options

API Methods

Examples

Styling Guide

Build docs developers (and LLMs) love

Complete Example

Full Working Example

Import Methods

Common Configuration Options

Basic Options

Navigation & Controls

Autoplay

Responsive Configuration

Touch & Drag

Real-World Example: Image Gallery

Accessing Slider Information

Controlling the Slider

Listening to Events

Troubleshooting

Next Steps