こんにちわ。nap5です。


Pinterestのランディングページをtailwindcssライブラリを使って作ってみましたので、紹介したいと思います。あまり作り込まない段階のスケルトン的なイメージでワークアラウンドしてみました。

多少は変えていますが、ファーストビューの自動スライダーの部分を今回は再現してみた感じです。あとはスクロールないしは矢印キーでのステップ進行ですかね。staggerの部分はちょっと端折っています。結構難易度が高めと判断しています。

swiperjsライブラリはこちらです。

splidejsライブラリはこちらです。

デモサイトです。

デモコードです。

追記です。

iphoneのモバイル確認で期待通りに動作したデモサイトを追加します。

簡単ですが、以上です。