tiny sliderの真ん中の要素を大きくする

tiny sliderで3つの要素のスライダーを作っているときに、真ん中の要素だけを大きくなるように実装することがありました。

tiny sliderの特定の要素を大きくする方法をメモとしてまとめます。

tiny sliderを導入する方法

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

「tiny slider」を導入するには、まず最新バージョンのライブラリを公式ウェブサイトからダウンロードします。そしてHTMLファイル内で次のように読み込みます。

<link rel="stylesheet" href="path/to/tiny-slider.css">
<script src="path/to/tiny-slider.js"></script>

 

要素の設定

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

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

 

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

要素を中央揃えにし、中央の要素を大きくするためにCSSを追加します。

.tiny-slider {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tiny-slider .tns-slide-active {
  transform: scale(1.2); /* 中央の要素を1.2倍に拡大 */
  transition: transform 0.3s ease;
}

 

これにより、tiny sliderが適用された要素内で現在表示されている中央の要素が拡大されます。

 

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

2023年版 Webコーディングにオススメの学習本【HTML/CSS/JavaScript】この記事では、初心者から中級者以上まで、Webコーディングの学習にオススメの学習本をご紹介します。この記事で紹介する本は、分かりやすい解説や実践的な例題、デザインや解説図など、学習をサポートするいろんな要素が含まれている本を選びました。ぜひ、自分に合った本を見つけて、ウェブ制作のスキルを磨いてみてください。...