縦にも横にもスライドできるスライダー「jQuery Multirole Slider」【javascript】

jquery multirole slider JavaScript

こんにちは、なっちる先生(@nacchi_jagariko)です。

現在、フリーランスエンジニアとして活動しています。

今回は、横方向はもちろん、縦方向にもスライドできるスライダー「jQuery Multirole Slider」の紹介です。

この記事は以下の人向けです。

縦にもスライドできるスライダーってないの!?使い方は?

では、参りましょう〜。

スポンサーリンク

 こんなものが作れるよ!

まず、どんなものが作れるのか、デモページを見てみてください。

※以下の画像のような、なっちる先生がうじゃうじゃしているサイトが現れます。ご注意ください。

横方向はもちろんのこと、縦方向にも動くんですねぇ〜。

実装するのは意外と簡単で3分くらいでできます!

いざ、3分クッキング!!!

「jQuery Multirole Slider」の使い方

では早速、スーパースライダーの使い方について解説します。

slider.cssとslider.jsをダウンロード

まず、こちらの公式サイトからソースをダウンロードしてください。

ダウンロードしたzipファイルを開くと、以下のようにファイルがたくさんあると思います。

cssフォルダ内の「slider.css」と、jsフォルダ内の「slider.js」だけ使います。

headで必要ファイルを読み込む

<head></head>内で以下のファイルを読み込みます。

  • slider.css
  • slider.js
  • jquery.min.js

jqueryのファイルは外部サーバーから取り込めますが、slider.cssとslider.jsは各自で配置してください。

jqueryを読み込む際は「https」にすることに注意です!

コードは以下です。

HTML内にコードを追加

HTMLのコードを貼り付けます。

スライドのまとまりには「slideGuide」のクラス名を、個々のスライドには「slideCell」のクラス名をつけます。

とりあえず、以下のコードをコピペで大丈夫です。

クラス「slideFrame」の高さと、画像の大きさは各自でcssをつけてください。

jsコードを追加

最後にスライドが動くように、jsのコードを加えます。

上方向にしたいときはこのようなコードを加えます。

その他のカスタマイズ

その他いろいろとカスタマイズできます。

↑実験してみての感想と使い方をコメントアウトして書いています。

現実的に使うのは、

  • 「sp」or「time」
  • 「direction」
  • 「pause」

くらいです。

方向を変えるときはクラス名も変えることに注意だよ!

全体のコード

参考までに簡単な全体のコードをのせておきます。

 まとめ

以上、縦にも横にもスライドできる「jQuery Multirole Slider」の紹介でした〜。

いかがだったでしょうか?

「jQuery Multirole Slider」を使って楽しいサイトが作れそうですね!

以上でなっちる先生の授業を終わります〜。

素敵なスライドライフを!

参考

ペラペラめくれる「BookBlock」の使い方【絵本も!カレンダーも!パラパラ漫画も!】【jQuery】
こんにちは、なっちる先生(@nacchi_jagariko)です。 現在フリーランスエンジニアとして活動しています。 今回は、絵本をめくるみたいにペラペラめくれる動きを実装できる「BookBlock」の紹介になります〜。 ...
プログラミング+ブログが最強説【フリーランス目指している方へ】
こんにちは、なっちる先生(@nacchi_jagariko)です。 現在フリーランスエンジニアとして活動しながら、こちらのブログも運営しています。 先日以下のようなツイートをしました。 プログラミングでフリーランス目指して...
スポンサーリンク
JavaScript
なっちる先生をフォローする
なっちる先生
タイトルとURLをコピーしました