BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. コーディング(html/css/JavaScript)
  5. jqueryによる簡易スライダープラグインを作る
by 漢ムラタ 漢ムラタ

jqueryによる簡易スライダープラグインを作る

jqueryによる簡易スライダープラグインを作る

こんにちは、ひとりハーモニーランド以外のソロ活動は大体可能なソロニスト ムラタです。

今回は横並びの要素をボタンで左右にスライドさせるだけの簡易的なスライドのプラグインを作成していこうと思います。

このような単純なものなら既存のプラグインを使わず自分で一から作ってみたほうがjQueryに対する理解も深まり、既存プラグインのカスタマイズなどもしやすくなるのではないでしょうか。

目次

  1. 前提
  2. デモ
  3. htmlとcss
  4. jQuery
  5. 最後に

前提

今回スライダーを作るにあたって前提として、

  •  スライドさせる要素は「li」に限定させる
  • それぞれの「li」の幅は固定して統一
  • 一度に表示させるliの数や合計値などある程度は手動で設定(今回は4つ表示とします)
  • スライドするのは1つずつ

以上の決まりがあります。

これじゃあ使いにくいな~という方はご自分でカスタマイズもしくは一から作ってもらうか、世にあふれているもっと高機能のプラグインをご使用ください。
あくまで簡易ですので・・・

デモ

とりあえず四の五の言わずさっさと動きみせろや、って方も多いと思います(自分もです)ので先にデモページへのリンクを張っておきます。
どういった動きなのかご確認ください。

htmlとcss

それでは早速作っていきましょう。
今回使用したhtmlソースは以下になります。

html

「li」タグをスライドさせる要素として、それを「div」で括っています。
なので必要最低限のタグは「div」「ul」「li」の3つだけです。

あ、当然ですがhead内でjQueryを読み込んでおきましょう。

css

cssはこんな感じです。

スライダーを囲んでいるdivには幅とはみ出した部分を不可視にするoverflowを設定をします。

ulには高さとoverflowを設定します。幅は後ほどjQueryで計算して設定するのでここでは不要です。

スライドする要素になるliにはflotで一列に並べ幅と高さも指定してやります。

jQuery

では肝心のjQueryのプラグインを作っていきましょう。

これがプラグインを書く上での基本の形になります。こうすることで「$」を使用してもprototype.jsなどの他のJavaScriptフレームワークに影響を与えることがなくなります。

「$.fn.simpleSlider」の部分がメソッド名となり、これ以降に実際の処理を書いていきます。今回はメソッド名を「simpleSlider」としました。

引数の設定

次にオプションを引数で受け取れるようにします。アニメーションのスピードや動きなど決められたオプション値を設定してあげれば、わざわざ本体を編集することなく変更することができるので便利ですね。

設定の方法は以下の通りです。

今回設定した引数は「next」「prev」「speed」「easing」の4種にしました。
easingに関してはeasingプラグインを使用していないので「linear」と「swing」の2種のみです。

初期設定

いきなり動きの記述をする前にまず色々と準備をしましょう。
上記コードの「var setting = $.extend…」からの続きになります。

スライドさせる要素「li」を格納するのですがここでいう「this」とはこのプラグインを実行させる際に指定した要素になります。

例えば上記なら「#sliderSingle」のことです。

先ほど格納した要素の幅を取得します。前提で書いた通り全てのli要素の幅が同一なのでこの書き方でも大丈夫なのですが、要素ごとに幅が異なる場合はNGです。
またouterWidth(true)とすることでmargin幅も合計した幅を取得しています。

murata20140806-1

要素のmargin含む幅を取得したら次に要素の数を取得します。

はい、そのまんまです。lengthを用いて要素の数を取得しました。

これで要素の幅と数が揃ったので、要素の合計数を親となる「ul」の幅に指定しましょう。

これで今こういう状態になっています。

murata20140806-2

最後に残りの「speed」と「easing」の値も変数に格納しときます。

 ボタンの設定

左右にスライドさせるためのボタンを用意するのですが、今回引数の「next」と「prev」の指定が無い場合は囲み要素の直下にそれぞれ「button」要素を生成することにしました。

また、今回のスライダーで一度に表示する数を4としていますので、スライドする要素がそれ以下の場合はボタンの生成はしないようにもしておきましょう。

これで引数が無い場合はbutton要素が入り引数がある場合は、その要素がそれぞれ次へと前への動きをさせるボタンになります。

murata20140806-3

上の例の引数ありでは矢印の画像にそれぞれclass「next」と「prev」を割り振り引数に指定しています。表示位置とかはcssで好きなように変更すればOKです。

「次へ」の動き

ようやく動きに関する処理ですが、まずは「次へ」を押した時の処理について見ていきましょう。

まず「itemP.not(“:animated”)」でアニメーションしておらず停止している場合のみ処理を行います。
こうすることでボタン連打で延々動き続けるようなことを防げます。

次の「animate」以降の処理で1つの要素分左に親(ul)をずらし、最初のli要素を「detach」で削除した後変数に格納。

そして親のずらした位置を戻した後に親の最後に先ほど格納したli要素を挿入。
ようするに最初の要素を最後に持ってきたわけですね。

図で表すとこんな感じ。

「前へ」の動き

最後に「前へ」を押した時の動きですが、こちらは単純にさっきしたことの逆をすればいいんでしょ?とか考えてるとうまくいきません。

逆なのは確かなのですが処理を行う順番が問題となります。

「次へ」の時は「左にずらす」→「最初の要素削除」→「ずらした分を戻して最後に挿入」でしたが、「前へ」の時は「最後の要素を削除」→「最初に挿入」→「ずらして戻す」となります。

最後の「ずらして戻す」という部分が「何言ってんだこいつ」と思いますが、図で説明していきましょう。

murata20140806-5

このような流れになるわけですが、先に右にずらしちゃうと左側(要素の先頭)に空白ができちゃいますよね?なので先に不可視領域にいる最後の要素を削除・格納します。

そして先頭に先ほどの要素を戻すのと1要素分左にずらす処理をほぼ同時に行ってから、アニメーションで右にずらす処理をするという流れです。

最後に

最後にjQueryを最初から最後までまとめたものを載せておきます。

例によって例のごとくプログラムバリバリにできる人が見たらおかしい点や無駄な点も多いと思いますが、そこはご勘弁ください。

ページの先頭に戻る