splidejsのスライダーと連動させたコンポーネント切り替えメニューを作ってみよう
こんにちわ。nap5です。
splidejsのスライダーと連動させたコンポーネント切り替えメニューを作ってみたので、紹介したいと思います。
アクティブなメニューアイテムに関してはframer-motionで動きを付けています。
splidejsライブラリはこちらになります。
ワイプ操作ができるスライダーUIライブラリのアクティブインデックス切り替えイベントをキックとしたDOM連動はできると幅が広がるので、今回デモを用意してみました。
デモサイトです。
デモコードです。
Splideコンポーネントがマウントされたタイミングで各種インスタンスのrefを保持しておき、アクティブインデックスがメニュー起点で変更された場合は、インスタンスのアクティブインデックスも設定しなおすとよいです。
アクティブなクラスのアタッチ・デタッチの切り替えはonVisibleイベントのコールバックで実装するとうまくまとまります。
ページング機能やチャプター形式のUIなどにも応用が利くので、次回はチャレンジしてみたいですね。
最近では、MENTAをはじめてみました。MENTAを使って提供していることを紹介している記事は以下になります。
また、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。
最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。
また、コースの内容紹介記事は以下になります。
簡単ですが、以上です。
この記事が気に入ったらサポートをしてみませんか？