Swiffy Slider
Swiffy Sliderはパフォーマンスを重視した高速で軽量なカルーセル/スライダーライブラリです。今のブラウザやユーザーの環境に最適化されたモダンな設計となっています。
スライダーを実装する優秀な先発ライブラリの多くは過去のもので、仕様もほとんどは当時の技術レベルがベースとなっていますが、Swiffy Sliderは現代の環境に最適化されたもので、例えばスライド、ドラッグ、スナップなどの動作は全てJSが使われておらず、JSそのものを使用しないシンプルモードも搭載されているそうです。
これによって今までのスライダースクリプトよりも高いパフォーマンス、UX、シンプルさを実現されており、殆どのデバイスにも対応できるようになっています。 WCAG互換、Google Lighthouseでの高得点、様々なフロントエンドフレームワークとの互換性を持っており、多くのシーンで使える汎用性の高さが特徴となっています。
使い方もとてもシンプルで従来のスライダー系ライブラリとさほど変わりませんので学習コストも少なく済みます。
<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.1.0/dist/js/swiffy-slider.min.js" crossorigin="anonymous" defer></script>
<link href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.1.0/dist/css/swiffy-slider.min.css" rel="stylesheet" crossorigin="anonymous">
<div class="swiffy-slider">
<ul class="slider-container">
<li><img src="https://source.unsplash.com/49b9l_29ceA/1600x900" style="max-width: 100%;height: auto;"></li>
<li><img src="https://source.unsplash.com/nKAglN6HBH8/1600x900" style="max-width: 100%;height: auto;"></li>
<li><img src="https://source.unsplash.com/E9ZwWcMGzj8/1600x900" style="max-width: 100%;height: auto;"></li>
</ul>
<button type="button" class="slider-nav"></button>
<button type="button" class="slider-nav slider-nav-next"></button>
<div class="slider-indicators">
<button class="active"></button>
<button></button>
<button></button>
</div>
</div>
スライダーやカルーセルは未だに需要もあり、よく使われているものの、ライブラリは既に開発が止まっているものが使われていたり、といったケースも見かけるのでこの機会にアップデートするのも良いかもしれませんね。ライセンスはMITとの事です。
