Home > Javascript > Swiper.jsで遷移ボタンをスライドの外に出して複数設置する

Swiper.jsで遷移ボタンをスライドの外に出して複数設置する

公開日:

最終更新日:

swiper


Deprecated: implode(): Passing glue string after array is deprecated. Swap the parameters in /home/users/1/chicappa.jp-tfmo/web/oboegaki/wp-content/plugins/crayon-syntax-highlighter/util/crayon_util.class.php on line 73

swiper.jsで遷移ボタンを外側に出して複数設置したら、全部まとめて動くのでその辺りを調整しました。

まず、swiper.jsとcssを読み込んでください

npmは

まずは普通に設置

普通にswiper.jsを設置してます

Demo

デモはこちら

Html

css

swiperの横と縦の大きさって感じですね

js

普通に設置してます。
オプションに関してはswiper.jsのapiをご参照ください

外に出したパターン

htmlで外にdivで囲って、元の.swiper-containerの外に出してあげるだけです。
場所とか色々なのはcssで整えるといいです

Demo

デモはこちら

html

外に出して複数のパターン

外に出すだけだと、複数設置すると同じ様に動いてしまうので、疑似的にクリックさせてます

Demo

デモはこちら

html

中に通常のボタンを配置して、外に新たにボタンを作っています。

css

デフォルトのボタンを見えない様に飛ばして、新しいボタンを配置してます
場所やデザインなんかは調整してくださいね

js

新たなボタンをクリックしたら、見えなくしているボタンをクリックした様にしてます

使うか使わないかわかりませんが、どうぞご利用ください

Comment

よろしければコメントをどうぞ