コンテンツをスライドさせたいのですが「Swiper.js」で実装可能でしょうか？

Question

以下の画像のようなスライドを実装したいのですが、Swiper.jsで実装可能でしょうか？

• オレンジ枠をクリックしたら次のコンテンツへスライド
• 赤枠をクリックしたら該当のコンテンツへスライド

Comments

[m.ts10806]

まず、やってみては。

Answer 1

スマホからなので簡単に。

barba.jsなどでtransition付きで画面全体を遷移させたいということでしょうか？

• https://codepen.io/thierrymichel/project/full/XkkWWv

扱いにくい癖がありますので、自身で調べた上で検討ください。

---

swiper.jpでも
全画面表示して
各ページにコンテンツを書いて
Hashナビゲーションでジャンプすればだいたい希望通りの動きになりそうですね。

ただしカルーセルなので、Page1→Page4にジャンプする時Page2,3が見えてしまうかもしれません。

Comments

[tk-777]

ありがとうございます。

Answer 2

Swiperは機能が豊富でカスタマイズ性が高いので可能だと思います。

ただ、実際にできるかどうかは人（スキル）にもよると思うので、
ご自分で実装する事を考えているのであれば、
公式ドキュメントを見て判断されるのが良いと思います。

Comments

[tk-777]

ありがとうございます。