Skip to main content

Tiny Slider

A lightweight, vanilla JavaScript slider library for creating smooth carousels and galleries. No dependencies, just pure performance.

Zero dependencies
5.3k+ GitHub stars
IE8+ support

Quick Start

Get your first slider running in under a minute

1

Install the package

Install Tiny Slider via npm, yarn, or load it from a CDN.
npm install tiny-slider
2

Add your HTML markup

Create a container element with your slides. Use a div or ul as the container.
<div class="my-slider">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>
3

Initialize the slider

Import the tns function and initialize your slider with options.
import { tns } from 'tiny-slider';

const slider = tns({
  container: '.my-slider',
  items: 1,
  slideBy: 'page',
  autoplay: true,
  controls: true,
  nav: true
});
Your slider is now active with navigation controls, dots, and autoplay. The slider will automatically adapt to different screen sizes and provide touch/swipe support on mobile devices.

Key Features

Everything you need for modern sliders

Carousel & Gallery

Two distinct modes: carousel for continuous sliding and gallery for fade transitions

Responsive

Breakpoint-based configuration for perfect layouts on any screen size

Touch Support

Native touch and mouse drag support with swipe detection

Autoplay

Automatic slide progression with hover pause and direction control

Lazy Loading

Load images only when needed to improve performance

Accessibility

ARIA attributes and keyboard navigation built in

Ready to build your slider?

Join thousands of developers using Tiny Slider to create beautiful, performant carousels and galleries

Start Building

Build docs developers (and LLMs) love