Skip to main content

​
What is Tiny Slider?

Tiny Slider is a lightweight, vanilla JavaScript slider library inspired by Owl Carousel. It provides a powerful and flexible solution for creating responsive carousels and galleries with zero dependencies. At its core, Tiny Slider is designed to be fast, accessible, and easy to use while supporting both modern and legacy browsers.
Tiny Slider works with static content and runs in the browser only. If your HTML is loaded dynamically, make sure to call tns() after the content has finished loading.

​
Key Features

Tiny Slider offers a comprehensive set of features that make it suitable for various use cases:

Multiple Modes

Support for carousel (sliding) and gallery (fade) modes with horizontal and vertical orientations

Responsive Design

Built-in responsive options with breakpoint-based configuration for mobile-first development

Touch & Drag

Native touch support for mobile devices and optional mouse drag for desktop browsers

Autoplay & Controls

Autoplay with customizable direction, speed, and hover pause functionality

Lazy Loading

Built-in image lazy loading to improve performance and reduce bandwidth

Accessibility

Full keyboard navigation support (arrow keys) and ARIA attributes for screen readers

​
Advanced Capabilities

  • Loop or Rewind: Seamlessly loop through slides or rewind to the beginning
  • Auto Height: Container height automatically adjusts to each slide’s content
  • Fixed/Auto Width: Support for fixed-width slides or auto-width based on content
  • Center Mode: Center the active slide in the viewport (v2.9.2+)
  • Edge Padding & Gutter: Fine-tune spacing between slides and viewport edges
  • Custom Events: Hook into lifecycle events like transitionStart, transitionEnd, and more
  • Nested Sliders: Support for sliders within sliders
  • localStorage Caching: Browser capability detection results are cached for better performance

​
Browser Support

Tiny Slider offers extensive browser support, including legacy browsers: Desktop Browsers:
  • Firefox 8+
  • Chrome 15+ (likely works on Chrome 4-14 as well)
  • Safari 4+
  • Opera 12.1+
  • Internet Explorer 8+
Mobile Browsers:
  • Android Browser 4.2+
  • Chrome Mobile 63+
  • Firefox Mobile 28+
  • Maxthon 4+
For IE8 support, you’ll need to include the IE8 polyfills helper file. See the Installation page for details.

​
Why Choose Tiny Slider?

​
Lightweight & Fast

Tiny Slider is built with performance in mind. It uses percentage-based widths instead of pixels, eliminating the need to recalculate slide widths on window resize. Browser capability values are saved to localStorage, so they don’t need to be rechecked until the browser is upgraded.

​
No Dependencies

Unlike many slider libraries that require jQuery or other frameworks, Tiny Slider is pure vanilla JavaScript. This means:
  • Smaller bundle size
  • Fewer HTTP requests
  • Better performance
  • No conflicting library versions

​
Modern Web Standards

Tiny Slider leverages modern CSS features when available:
  • CSS transforms with 3D transform support detection
  • CSS Media Queries for responsive behavior
  • CSS calc() function for layout calculations
  • Graceful fallbacks for older browsers

​
Flexible Configuration

With over 40 configuration options, you can customize virtually every aspect of the slider: 
var slider = tns({
  container: '.my-slider',
  items: 3,
  slideBy: 'page',
  autoplay: true,
  controls: true,
  nav: true,
  responsive: {
    640: {
      items: 4,
      gutter: 20
    },
    900: {
      items: 5
    }
  }
});

​
Comparison with Other Sliders

  • No dependencies: Zero dependencies vs jQuery requirement
  • Better performance: Percentage-based layout, localStorage caching
  • IE8 support: Full IE8 support with polyfills
  • Smaller footprint: Lighter weight overall
  • Simpler API: Easier to learn and configure
  • Better legacy support: IE8+ vs IE11+
  • Lightweight: Smaller bundle size for basic use cases
  • Swiper advantages: More advanced features, better touch gestures, virtual slides

​
Use Cases

Tiny Slider is perfect for:
  • Product carousels in e-commerce sites
  • Image galleries and portfolios
  • Testimonial sliders
  • Content carousels on marketing pages
  • Mobile-friendly navigation components
  • Banner rotators
  • Any scenario requiring a lightweight, accessible slider

​
Getting Started

Ready to start using Tiny Slider? Here’s what to do next:
1

Install the library

Choose your preferred installation method: npm, yarn, pnpm, or CDN.Go to Installation →
2

Follow the quickstart guide

Get your first slider up and running in minutes with our step-by-step guide.Go to Quickstart →

​
Version Information

Current Version: 2.9.4This documentation covers Tiny Slider v2. Previous versions (v1 and v0) are available on GitHub but are no longer actively maintained.

Build docs developers (and LLMs) love

Get started for freeTalk to us