先日WordBench福岡に参加してきました。刺激的な内容でしたが自分はまだまだ勉強が足りないなと思う一方です。。。がんばろう。。。
さて！今回はjQueryのプラグインをいじっていきたいと思います！いい加減コードシンタックスハイライトを入れたいところです！笑
bxsliderは前にこのサイトでも紹介しました、Webサイト制作でよく使うプラグインの一つです。
カスタマイズの方法を少しでも知っておくといざという時に備えることができます。
それではいってみましょう！
パブリックメソッドってなに？
まずはここで「ん？」と思う方が多いはず。
今回の場合で簡単に説明すると
「プラグインで用意されている関数を、外から利用する仕組み」
なので、今回の内容でいくと「bxsliderでパブリックメソッドとして用意されている関数を使おう！」ということ。
bxsliderの場合、以下のようなパブリックメソッドが用意されています。
- goToSlide(n) 指定されたスライドに遷移を実行
- goToNextSlide() 「次へ」の動作を実行
- goToPrevSlide 「前へ」の動作を実行
- startAuto() 自動表示を開始
- stopAuto() 自動表示を停止
- getCurrentSlide() 現在のアクティブなスライドを返す
- getSlideCount() スライドの総数を返す
- redrawSlider() スライドを再描画
- reloadSlider() スライドをリロード
- destroySlider() スライドを破棄する
結構たくさんありますね！
今回使っていくのは、最初の2,3番目の「前へ、次へ」の部分です。
詳しくは、公式のgithubを読んでみてください。
https://github.com/stevenwanderski/bxslider-4
ちなみに、コールバック関数も用意されておりスライドの実行タイミングをフックにイベントを発火させることもできます。
実際に使う時の使い方
まずは今回のHTML。「original-controls」というクラスの中のa要素に前後へのボタンの機能をつけていきます。
cssで見た目を整理して( 今回はcssは重要では無いのでscss )、次にjQueryを書いていきます。
See the Pen bxslider use public method by Chankei (@Chankei) on CodePen.
jQueryの記述がこちら。
ポイントは、最初に変数に入れている部分。そして、下の方では実際にパブリックメソッドを使用しています。
See the Pen bxslider use public method by Chankei (@Chankei) on CodePen.
今回はクリックイベントに機能をつけていますが、この部分をいじることで様々な条件で前後の動作をつけることができます。
完成してこちらのようになります。
See the Pen bxslider use public method by Chankei (@Chankei) on CodePen.
まとめ
いかがでしたでしょうか。
カルーセルスライダーはWebサイト制作で必ずと言っていいほど使用します。
よくプラグインの一つであるbxsliderのカスタマイズを少しでも知っておくことで、表現の幅が広まります。
今回紹介したソースもコピペで使えるようになっているのでぜひ実際に使用してみてください。
Webサイト制作でよく使うjQueryプラグイン
こちらの記事で紹介した、プラグインのカスタマイズ方法を今後も紹介していきたいと思います。