tiny sliderで真ん中の要素だけを大きくする方法

tiny slider で3つ並べたスライダーの、真ん中の要素だけを大きく見せる方法を解説します。

結論から書くと、center: true オプションで中央寄せにしたうえで、中央のスライドに付く .tns-slide-active を transform: scale() で拡大します。CSSだけでは「どれが中央か」を判定できないため、オプションの指定が要ります。

あわせて注意点があります。tiny slider は最終リリースから約5年が経ち、公式サイトも現在つながりません。既存サイトの保守ならこの記事の内容で問題ありませんが、新規に作るなら Swiper や Splide も検討してください。入手先と代替の詳細はtiny sliderを実装する方法にまとめています。

tiny sliderを導入する方法

tiny sliderのライブラリを読み込む

かつての公式サイト（tinyslider.com）は現在つながりません。CDNから読み込むのがいちばん手軽です。

<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>

要素の設定

スライダーを実装したい要素に適切なクラス名を追加します。

<div class="tiny-slider">
  <div>要素1</div>
  <div>要素2</div>
  <div>要素3</div>
  <!-- 他の要素も追加可能 -->
</div>

真ん中の要素を大きくする方法

結論：まず center: true でスライダーを中央寄せにします。これを指定すると、中央のスライドにだけ .tns-slide-active が付くようになります。

const slider = tns({
  container: '.tiny-slider',
  items: 3,          // 3枚見せる
  center: true,      // 中央寄せにする（これが必須）
  loop: true,
  gutter: 20,
  controls: false,
});

そのうえで、CSSで中央のスライドを拡大します。

/* すべてのスライドに縮小と遷移を用意しておく */
.tiny-slider .tns-item {
  transform: scale(0.85);
  transition: transform 0.3s ease;
}

/* 中央のスライドだけ大きくする */
.tiny-slider .tns-slide-active {
  transform: scale(1);
}

親要素に display: flex を指定してはいけません。tiny slider は初期化時に自前でラッパーを作り、transform でスライドを動かす仕組みになっています。そこに display: flex を上書きすると、スライダーの配置計算が壊れて動かなくなります。

center: true を指定しないと、.tns-slide-active は表示中のスライドすべてに付きます。3枚見せている場合は3枚とも対象になるため、「中央だけ大きい」状態にはなりません。ここがつまずきやすい点です。

拡大したぶんが切れる場合は、スライダーの外側に余白を取ってください。

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

拡大の見せ方を調整する

結論：中央だけを1.2倍にするより、両隣を小さくするほうがレイアウトが崩れません。

中央を scale(1.2) にすると、その要素だけが元のサイズより大きくなり、上下にはみ出します。上の例のように基準を scale(0.85) にして中央を scale(1) に戻す形にすれば、はみ出しは起きません。

動きを減らす設定にしている人への配慮も入れておきます。

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

▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ