bxsliderのオプションを共通化したい

###前提・実現したいこと
ちょっとした疑問なのですが、独自で解決できずご質問させて頂きます。
jQueryのスライダー「bxslider」を１ページ内に複数使用する際、オプション設定を共通化することは可能でしょうか？
スライダーを適用したい要素に対して、ひとつひとつオプションを設定するのではなく、共通のオプションは共通化し、なおかつそれぞれ個別にも設定できるようにできればと考えています。

以下がサンプルのソースコードとなります。
相違点としては#slide02と#slide04にautoDirection: 'prev',のオプションが設定されているか否かです。

###該当のソースコード

javascript
1$(document).ready(function(){
2  $('#slide01').bxSlider({
3    mode: 'vertical',
4    infiniteLoop: true,
5    speed: 1000,
6    slideMargin: 0,
7    pager: false,
8    controls: false,
9    auto: true,
10    moveSlides: 1,
11    touchEnabled: true,
12    preventDefaultSwipeX: true
13  });
14  $('#slide02').bxSlider({
15    mode: 'vertical',
16    autoDirection: 'prev',
17    infiniteLoop: true,
18    speed: 1000,
19    slideMargin: 0,
20    pager: false,
21    controls: false,
22    auto: true,
23    moveSlides: 1,
24    touchEnabled: true,
25    preventDefaultSwipeX: true
26  });
27  $('#slide03').bxSlider({
28    mode: 'vertical',
29    infiniteLoop: true,
30    speed: 1000,
31    slideMargin: 0,
32    pager: false,
33    controls: false,
34    auto: true,
35    moveSlides: 1,
36    touchEnabled: true,
37    preventDefaultSwipeX: true
38  });
39  $('#slide04').bxSlider({
40    mode: 'vertical',
41    infiniteLoop: true,
42    autoDirection: 'prev',
43    speed: 1000,
44    slideMargin: 0,
45    pager: false,
46    controls: false,
47    auto: true,
48    moveSlides: 1,
49    touchEnabled: true,
50    preventDefaultSwipeX: true
51  });
52});

以上、何卒よろしくお願いいたします。

行動規範の内容に同意します

回答2件

jQuery.extend()でマージすると良さそうですね。

javascript
1var options= {
2    mode: 'vertical',
3    infiniteLoop: true,
4    speed: 1000,
5    slideMargin: 0,
6    pager: false,
7    controls: false,
8    auto: true,
9    moveSlides: 1,
10    touchEnabled: true,
11    preventDefaultSwipeX: true
12};
13$('#slide01').bxSlider(options);
14$('#slide02').bxSlider($.extend(options, {autoDirection: 'prev'}));
15$('#slide03').bxSlider(options);
16$('#slide02').bxSlider($.extend(options, {autoDirection: 'prev'}));

投稿2017/12/06 01:57

mri0815

総合スコア429

退会済みユーザー

2017/12/06 02:19

ご回答いただきありがとうございます。このような方法があるとは思いつきませんでした。しかしながら、ご指摘のコードでは正しく挙動せず、参考とさせていただきながら正しく挙動したコードを自己解決として活用させて頂きました。大変勉強となりました。誠にありがとうございます。

退会済みユーザー

2017/12/06 02:26 編集

serara13さんの回答を参考に問題が解決したのであれば、その回答をベストアンサーに選択し、解決したコードを別途記載するのが相応しいと思います。（自己解決のベストアンサーは取り消すことが出来ます）

行動規範の内容に同意します

ベストアンサー

serara13様より頂いたご回答を参考とし、以下のコードで実現できました。

javascript
1$(document).ready(function(){
2  var options= {
3    mode: 'vertical',
4    infiniteLoop: true,
5    speed: 1000,
6    slideMargin: 0,
7    pager: false,
8    controls: false,
9    auto: true,
10    moveSlides: 1,
11    touchEnabled: true,
12    preventDefaultSwipeX: true
13  };
14  $('#slide01').bxSlider(options);
15  $('#slide02').bxSlider($.extend(true, {}, options, {autoDirection: 'prev'}));
16  $('#slide03').bxSlider(options);
17  $('#slide04').bxSlider($.extend(true, {}, options, {autoDirection: 'prev'}));
18});