Make the Middle Slide Larger in tiny slider

This article covers how to make the middle slide larger in a three-across tiny slider.

The short answer: set center: true, then scale the slide carrying .tns-slide-active. CSS alone cannot tell which slide is in the middle, so the option is required.

One note before starting. tiny slider’s last release was around five years ago and its official site no longer resolves. It is fine for maintaining an existing build, but for new work consider Swiper or Splide — see how to implement tiny slider for where to get it and what the alternatives are.

Loading tiny slider

The old official site (tinyslider.com) no longer resolves. 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>

The markup

<div class="tiny-slider">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Enlarging the middle slide

Start with center: true. That is what makes .tns-slide-active apply to the centre slide only.

const slider = tns({
  container: '.tiny-slider',
  items: 3,          // show three at a time
  center: true,      // centre the active slide (required)
  loop: true,
  gutter: 20,
  controls: false,
});

Then scale it in CSS.

/* shrink every slide and give it a transition */
.tiny-slider .tns-item {
  transform: scale(0.85);
  transition: transform 0.3s ease;
}

/* return the centre slide to full size */
.tiny-slider .tns-slide-active {
  transform: scale(1);
}

Do not put display: flex on the container. tiny slider builds its own wrapper at initialisation and moves slides with transform. Overriding the display mode breaks its layout calculations and the slider stops working.

Without center: true, .tns-slide-active applies to every visible slide. Showing three means all three match, so nothing appears larger than anything else. This is the usual reason the effect seems not to work.

If the enlarged slide gets clipped, give the wrapper some vertical breathing room:

.slider-wrap {
  padding: 20px 0;
  overflow: hidden;
}

Tuning how the size difference reads

Shrinking the neighbours works better than enlarging the centre.

Scaling the centre slide to 1.2 makes it larger than its natural size, so it overflows vertically. Using scale(0.85) as the baseline and returning the centre to scale(1), as above, avoids that entirely.

Respect reduced-motion preferences as well:

@media (prefers-reduced-motion: reduce) {
  .tiny-slider .tns-item {
    transition: none;
  }
}

Summary

Two things make this work: center: true in the options, and scaling down rather than up in the CSS. Skipping the first means every visible slide is treated as active; skipping the second means the centre slide overflows its container.

For the spacing between slides, the CSS gap property for Flexbox and Grid covers the same idea that tiny slider’s gutter option handles here.