編集履歴

回答編集履歴

テキスト修正

2018/02/19 01:46

投稿

スコア9058

test CHANGED Viewed

@@ -216,7 +216,7 @@
-ですので、今、上記の２カ所で `.bxSlider()` を実行しているのを、
+ですので、現状では、上記の２カ所で `.bxSlider()` を実行しているのを、
 `<ul>` に対してだけ行うようにして、そちらにオプションもまとめて渡せば

テキスト追記

2018/02/19 01:46

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -192,11 +192,11 @@
 先に挙げた、`auto: true` ありなしを試す jsFiddle に作ったコードでも、
-`ul` に対してだけ、 `.bxSlider()` を実行しています。
+`<ul>` に対してだけ、 `.bxSlider()` を実行しています。
-ですので、ご質問のような、２箇所で `.bxSlider()` を実行することで
+ですので、ご質問のコードような、２箇所で `.bxSlider()` を実行してしまうと、
 うまく動くのだろうか？ という懸念があります。

テキスト修正

2018/02/18 15:09

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -200,9 +200,19 @@
 うまく動くのだろうか？ という懸念があります。
-（私自身、実際に仕事で `bxSlider`を使った実績がありますが、上記のような２カ所に
+私自身、実際にフロントエンド開発の業務で `bxSlider`を使った実績がありますが、
+上記のように、２カ所（それも、この例にあるような親子関係にある２つの要素）に対して
+初期化するスライダーを作ったことはないですし、また、そういうやり方もあるということが
+書かれたドキュメントを読んだこともないです。（もし bxSlider の作者か
+主要なメンテナーの方が「そういうやり方もある」と、どこかでコード例とともに言っている
-対して初期化する例を見たことがありません。）
+のでしたら、私の不勉強ですから、逆にご教示いただきたいです。）

テキスト修正

2018/02/18 15:05

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -92,11 +92,15 @@
+`auto: true` **あり： **
-auto: true あり： [https://jsfiddle.net/jun68ykt/0a7wmj07/11/](https://jsfiddle.net/jun68ykt/0a7wmj07/11/)　=> 画面読み込み後、２，３秒後に開始します。
+[https://jsfiddle.net/jun68ykt/0a7wmj07/11/](https://jsfiddle.net/jun68ykt/0a7wmj07/11/)　=> 画面読み込み後、２，３秒後に開始します。
+`auto: true` **なし：**
-auto: true なし： [https://jsfiddle.net/jun68ykt/0a7wmj07/12/](https://jsfiddle.net/jun68ykt/0a7wmj07/12/) => 開始しない。
+[https://jsfiddle.net/jun68ykt/0a7wmj07/12/](https://jsfiddle.net/jun68ykt/0a7wmj07/12/) => 開始しない。

テキスト修正

2018/02/18 14:53

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -55,3 +55,163 @@
 なるかもしれません。
 （うまくいかなかったらごめんなさい）
+---
+**追記**
+私のほうでも確認しました。
+```javascript
+autoStart: true
+```
+は、ページがロードされたときにスライドを自動的に再生するプロパティではなかったようで、
+すみません。
+ご質問のコードにも
+```javascript
+auto: true,//自動再生
+```
+と書かれているとおり、自動再生のプロパティは `auto` であることを以下で確認できました。
+auto: true あり： [https://jsfiddle.net/jun68ykt/0a7wmj07/11/](https://jsfiddle.net/jun68ykt/0a7wmj07/11/)　=> 画面読み込み後、２，３秒後に開始します。
+auto: true なし： [https://jsfiddle.net/jun68ykt/0a7wmj07/12/](https://jsfiddle.net/jun68ykt/0a7wmj07/12/) => 開始しない。
+ですので、最初の回答に書いた、「`autoStart: true` にしてみては？」という提案は撤回します。
+その上で、次に、ご質問のコードのここが怪しいのでは？と思ったことを書きます。
+ご質問のコードだと、以下の２カ所で、 `.bxSlider()` 関数を実行して、スライダーになるようにしています。
+(1) `<div class="bxslider">` に対して
+```javascript
+$('.bxslider').bxSlider({
+  auto: true,//自動再生
+  autoControls: false,//再生・停止ボタン
+  controls: true,//NEXTボタン・PREVボタン
+  pager: true,//スライドナビ
+  speed: 500,//スライドの移動速度
+  autoHover: false,//マウスオーバー時停止
+  pause: 500,//自動再生の間隔
+  easing: 'swing',//イージング
+  minSlides: 3,//表示要素の最小数
+  maxSlides: 3,//表示要素の最大数
+  moveSlides: 1,//一度にスライドする要素数
+  slideWidth: 1170,//要素の幅
+  startSlide: 0,//最初にアクティブにする要素
+});
+```
+(2) `'.bxslider > ul'` に対して
+```javascript
+$slide3_ul.bxSlider({
+  maxSlides: 2,
+  easing: 'easeOutExpo',
+  speed: 1000,
+  onSliderLoad: function(cr){
+  $slide3_ul.children('li[data-num="' + cr + '"]').addClass('active');
+  $slide3.find('.bx-viewport > ul').css({
+  width: m * 100 + 415 + '%'
+});
+```
+私が思ったのは、上記のふたつのうち、 `.bxSlider()`を実行する対象は
+(2) の `<ul>` のほうだけでよいのではないか？ということです。
+先に挙げた、`auto: true` ありなしを試す jsFiddle に作ったコードでも、
+`ul` に対してだけ、 `.bxSlider()` を実行しています。
+ですので、ご質問のような、２箇所で `.bxSlider()` を実行することで
+うまく動くのだろうか？ という懸念があります。
+（私自身、実際に仕事で `bxSlider`を使った実績がありますが、上記のような２カ所に
+対して初期化する例を見たことがありません。）
+ですので、今、上記の２カ所で `.bxSlider()` を実行しているのを、
+`<ul>` に対してだけ行うようにして、そちらにオプションもまとめて渡せば
+うまくいくのではないか？ と思っています。
+もし、ご質問にあるような、２カ所で `.bxSlider()`を実行するやり方もアリで、
+そこはうまくいく確信があっておやりになっているのでしたら、すみません、この提案は
+無視してください。