jQuery bxSliderを使用時、任意のスライドで止める

  JavaScript, jQuery 

 

photo credit: Thomas Hawk via photopin cc

photo credit: Thomas Hawk via photopin cc

jQueryでスライドショーとかカルーセルが必要なときは、大体bxSliderを使用しています。

bxSlider

ちょっとした処理は自身で書いてしまうのですが、
このプラグインは一回読み込んでおけば通常のスライドショーもいけるわ、カルーセルもいけるわ、レスポンシブ対応だわで物凄く重宝してます。

スライドのエフェクトの種類はそんなに無いのですが、そもそも派手なエフェクトのスライドショーを求められることは殆ど無いので大体これ一択です。これからもよろしくお願いいたします。

使い方はちょっとググったらいっぱい出てきますので問題なし。

jQueryスライドショー「bxslider」の使い方まとめ(naver)

簡単に設置出来るJQueryスライドショー「bxSlider」の使い方。

この辺りを見れば設置やちょっとしたオプション設定はバッチリかと。

ただ、任意のスライドで止める方法、
例えばスライドセットを一周させて最初の画像で止めるとか、
そんな設定をしたいときの情報がすぐに見つからなかったので
今回はその備忘録です。

まずはbxSliderのオプションをチェック

至れり尽くせりなbxSlider様のことですから、気の利いたオプションが絶対あるはず。
下記ページでオプション設定をチェックです。

http://bxslider.com/options

ページスクロールしたら固定メニューでリファレンスが出るとか、もう、親切過ぎ。

探してみたらありました、まずはスライドを止めるための機能です。

■stopAuto

 これをスライドショーの切替時に、いい感じに実行すればスライドが止まりそうです。
切替時にコールバックでなんか出来そうなやつは・・・
ありました!

■onSlideBefore

 スライドショーが切り替わる前に処理を行えるそうです。

「$slideElement」、「 oldIndex」、「newIndex」でそれぞれ、
「スライドショーを実行してる要素」、「前のスライド番号」、「次のスライド番号」を取得できます。

これらを組み合わせたら何とかなりそうです。

「stopAuto」と「onSlideBefore」でうまいことやる。

例えばこんな感じでbxSliderを実行します。

 まずは任意のスライド番号時に何かする処理を追加。
今回は5枚あるスライドを一周させて最初のスライドで止めることを目指します。

oldIndexをconsole.log(oldIndex)とかで眺めて、値を設定します。

 スライドショーを実行している要素に対して、止めるための処理を設定します。

 「obj」にはスライドショーを実行している要素をゴソッと渡します。これを「onSlideAfter」で実行しましょう。

そ〜れ。

ちょっとコツが必要ですが、これでばっちりネ!

コレ聴きながら書きました!

もう夏ですよ!!

ブログの更新情報はこちらで配信しています。

   

follow us in feedly

ad

wpx

  • WordPressのテーマ制作やテンプレートについての概念など、実際にサイトを制作しながらWordPressを知ることができます。
    制作するだけでなく、ユーザビリティからSEO、さらにはパフォーマンス改善にも触れているという充実ぶり。
    オリジナルテーマ制作のお供にどうぞ!
  • JavaScript 第6版

    定番のO'Reilly本でJavaScriptを深く学びましょう!気になる箇所をざっと読むだけでも、とても参考になります。ざっと読みを繰り返すのがオススメ。超良書です!
  • サンプルが大充実!定番のjQuery入門書です。
    本の内容に沿って制作を進めるだけで、即実戦投入できる程の機能ができ上がります。
    解説が丁寧且つチートシートも付いているのでjQueryについての理解がぐんと深まりますよ!
  • wordpressに慣れてくると、今度は痒いところに手が届く細やかなカスタマイズをしたいですよね。phpを利用したカスタマイズからデータベースに直接アクセスする方法がとにかく丁寧に解説されています。個人的には第5章、「プラグインの自作」が物凄く役に立ちました!
  • サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル

    WordPressプラグインの開発から運用までカバーする、プラグイン開発のまさに「バイブル」です。

    セキュリティやマネタイズにも触れられていて参考になるところ多すぎです。
PAGE TOP ↑