Splide Premium

Splide Shader Carouselはthree.jsライブラリを使用してWebGLを操作しています。WebGLの採用によって、CSSでは再現できない、多彩で魅力的なトランジションエフェクトを実現することができます。

次の図のように、Splide Shader Carouselはcanvasを通常のフェードスライダーの背面に配置し、各スライド内にある画像をメッシュのテクスチャに変 換したうえで、お互いを同期させています。

現段階では、テクスチャとして画像のみをサポートしていますが、将来的には動画もサポートする予定です。

SplideShaderCarouselクラスはSplideクラスを継承していますが、

• フェードタイプのみサポートしています
• IEをサポートしていません
• Splideのオプションすべてをサポートしているわけではありません

サポートしていないオプションは次の通りです： type (fadeのみ)、perPage、perMove、clones、cloneStatus、focus、gap、padding、easingFunc、lazyLoad、cover。

また、three.js自体かなりサイズが大きいため（500kB+）、サイトのLighthouseスコアが下がるかもしれません。

このパッケージは、MITライセンスを基本として公開されますが、再配布目的での使用はできません。"dist"ディレクトリ内にあるファイル、またはそれらからビルドされたファイルは、Splide Shader Carouselを使用者のプロジェクトに実装する目的で、サーバやレポジトリ上で公開することができます。これらのファイルは、以下のティアに定めるスポンサーになった時点から、個人、商用にかかわらず自由に使用できます。ただし、そのほかのファイル（たとえばソースコードや例、あるいはドキュメントなど）を公開することはできません。これは、スポンサー限定のレポジトリという特性上の規約です。

なお、スポンサーをキャンセルすると、GitHubが自動的に解除手続きを行いますが、その時点でのパッケージはそのまま使用し続けて問題ありません。

上記の注意点と規約に必ず目を通してください。