How to Implement tiny slider (and What to Use Instead)

This article covers installing and implementing tiny slider.

The short answer: tiny slider still works, but for a new project consider Swiper or Splide instead. tiny slider’s last release was around five years ago, and its official site no longer resolves.

▼The options in 2026

If tiny slider is already in the project, or you are maintaining code that uses it, everything below still applies.

What tiny slider is

tiny slider is a lightweight, dependency-free slider library. It handles images, text and video as slides, and supports responsive breakpoints.

Implementing tiny slider: the basics

1. Getting the library

The official site that used to be linked, tinyslider.com, no longer resolves. Get the library from GitHub, npm or a CDN instead.

A CDN is the quickest route:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.js"></script>

Via npm:

npm install tiny-slider

To host the files yourself, take tiny-slider.css and tiny-slider.js from the dist folder of the GitHub repository.

2. The markup

<div class="slider">
  <div class="slide">Slide 1 content</div>
  <div class="slide">Slide 2 content</div>
  <div class="slide">Slide 3 content</div>
</div>

3. The CSS

.slider {
  display: block;
  width: 100%;
}

.slide {
  width: 100%;
}

4. Initialising it

<script>
  const slider = tns({
    container: '.slider',
    // options go here
  });
</script>

Implementing tiny slider: going further

1. Custom navigation

tiny slider renders its own controls by default. To supply your own, point controlsContainer at your markup.

<div class="slider">
  <!-- slides -->
</div>
<div class="custom-controls">
  <button data-controls="prev">Previous</button>
  <button data-controls="next">Next</button>
</div>

const slider = tns({
  container: '.slider',
  controlsContainer: '.custom-controls',
});

2. Responsive breakpoints

Change how many slides show at each width with the responsive option.

const slider = tns({
  container: '.slider',
  items: 1,
  responsive: {
    640: { items: 2 },
    1024: { items: 3 }
  }
});

What to use for new work

For a new slider, look at Swiper or Splide. If simple horizontal scrolling is all you need, CSS scroll-snap may be enough on its own.

tiny slider’s last release was 2.9.4, roughly five years ago. It has not stopped working, but reported issues are unlikely to be fixed.

Choose Splide if accessibility matters. It is one of the few slider libraries that follows the W3C carousel ARIA pattern out of the box, so keyboard and screen reader support are there from the start.

Choose Swiper for breadth: 3D effects, virtual slides, zoom, and wrappers for every major framework.

To avoid a library entirely, CSS scroll-snap covers a surprising amount of ground.

.slider {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

That gives you horizontal scrolling that snaps one slide at a time on a swipe or trackpad gesture. With no autoplay and no arrow buttons required, this is the lightest option by a wide margin.

The CSS gap property for Flexbox and Grid spacing covers the spacing used above.

For enlarging the centre slide in tiny slider, see making the middle slide larger in tiny slider.