【jQuery】bxsliderの設定

環境

  • jQuery v1.8.3
  • BxSlider v4.1.2

エンドレスオートスクロール

デフォだとページャーとかサムネをクリックすると自動スクロールが止まるので、その対処法。
715、728、763行目をコメントアウトする。

[js]
if (slider.settings.auto) el.stopAuto();
[/js]

js内のコメントに書いてるけど、一応内訳

  • 715行目 Click next binding
  • 728行目 Click prev binding
  • 763行目 Click pager binding

あって得する機能とは思えないし、何も考えずに切っちゃっていいかも。

サムネ設置

仕込んだ画像分の丸ポッチと矢印のNEXT・PREVは標準でついてる。
サムネ仕込むにはちょっと面倒。

調整用js
[js]
$(function(){
var slider = $(‘#slider2’).bxSlider({
auto: true,
pause: 5000,
speed: 1000,
mode: ‘horizontal’,
prevText: ‘<‘, nextText: ‘>’,
pager: true,
//easing: ‘easeOutBounce’,
pagerCustom: ‘.bx-pager’,
controls: false,
});
});
[/js]
ここで大事なのは「pagerCustom: ‘.bx-pager’,」

HTML
[HTML]


[/HTML]
調整用で仕込んだclass「bx-pager」がここで出てくる。
中のulは必須じゃない。
<a href=”#”>***</a>の形が取れてればいい。

使用例とか

特定のものに限らず、jQueryのプラグインは使われてる場合、jsのファイル名と中身そのままにしてるから、ソース覗けば一発で分る。
bxsliderは結構使われてる。
こことか、makeshopに標準でついてるスライダーもbxslider(2014年10月現在)。
自由度高いからなぁ、納得。
こうなってくると信用度が増すわけで。
お気に入りのものがないのならとりあえずこれを使いこなせるようになればいいんじゃないかな。

コメント

  1. […] 【jQuery】bxsliderの設定 | MEGE’s Factory – http://blog.megefeps.info/?p=94 […]

  2. […] 前の記事からバージョンも上がったので。 […]

タイトルとURLをコピーしました