teratail
回答率
85.29%
質問するログイン新規登録
トップに関する質問WordPress上のbxsliderで作成したカルーセルの、スマホ上でのコントロールの不具合について

編集履歴

質問編集履歴

7

テスト用URLの削除

2018/02/19 14:35

投稿

yytop
yytop

スコア20

title CHANGED
File without changes
body CHANGED
@@ -212,14 +212,4 @@
212
212
  </div>
213
213
  <!--/slide-->
214
214
  </div>
215
- ```
215
+ ```
216
- ＜追記2＞
217
- スマホでの動作確認用のテストURLを作りました。
218
- 真ん中くらいの「制作実績」の部分です。
219
- （解決するまで限定です）
220
-
221
- ＜うまくいかないWPのサイト＞
222
- http://yytop.ciao.jp/test180207/
223
-
224
- ＜うまく動作する静的HTML＞
225
- http://yytop.ciao.jp/test180207/html/index.html

6

テスト用URLを追記しました。

2018/02/19 14:35

投稿

yytop
yytop

スコア20

title CHANGED
File without changes
body CHANGED
@@ -212,4 +212,14 @@
212
212
  </div>
213
213
  <!--/slide-->
214
214
  </div>
215
- ```
215
+ ```
216
+ ＜追記2＞
217
+ スマホでの動作確認用のテストURLを作りました。
218
+ 真ん中くらいの「制作実績」の部分です。
219
+ （解決するまで限定です）
220
+
221
+ ＜うまくいかないWPのサイト＞
222
+ http://yytop.ciao.jp/test180207/
223
+
224
+ ＜うまく動作する静的HTML＞
225
+ http://yytop.ciao.jp/test180207/html/index.html

5

javascript追記しました

2018/02/07 14:14

投稿

yytop
yytop

スコア20

title CHANGED
File without changes
body CHANGED
@@ -49,6 +49,26 @@
49
49
  </div>
50
50
  ```
51
51
  ``` javascript
52
+ var replaceWidth = 768,
53
+ winW,
54
+ winH,
55
+ widthFlag;
56
+
57
+ //■ デバイス判定
58
+ $(window).on('load resize', function() {
59
+
60
+ winW = $(window).width();
61
+ winH = $(window).height();
62
+
63
+ if(winW <= replaceWidth && widthFlag !== 'smt') {
64
+ widthFlag = 'smt';
65
+ } else if(winW > replaceWidth && widthFlag !== 'pc') {
66
+ widthFlag = 'pc';
67
+ }
68
+ });
69
+
70
+
71
+ //*******************************************************************//
52
72
  var optionPC = {
53
73
  auto:false,
54
74
  speed:700,

4

Javascript追記しました

2018/02/07 03:43

投稿

yytop
yytop

スコア20

title CHANGED
File without changes
body CHANGED
@@ -49,6 +49,33 @@
49
49
  </div>
50
50
  ```
51
51
  ``` javascript
52
+ var optionPC = {
53
+ auto:false,
54
+ speed:700,
55
+ captions: false,
56
+ controls: true,
57
+ nextText: '',
58
+ prevText: '',
59
+ useCSS: false,
60
+ }
61
+ var optionSMT1 = {
62
+ auto:false,
63
+ speed:700,
64
+ captions: false,
65
+ controls: true,
66
+ nextText: '',
67
+ prevText: '',
68
+ useCSS: false,
69
+ }
70
+ var optionSMT2 = {
71
+ pager: false,
72
+ minSlides: 3,
73
+ maxSlides: 3,
74
+ moveSlides: 1,
75
+ slideWidth: 110,
76
+ slideMargin: 0,
77
+ }
78
+
52
79
  function sliderPC(){
53
80
  var slider_pc1 = $('.sliderBox1').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox1'}));
54
81
  var slider_pc2 = $('.sliderBox2').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox2'}));
@@ -72,6 +99,23 @@
72
99
  }));
73
100
 
74
101
  }
102
+
103
+ var timer = false;
104
+ $(window).load(function() {
105
+
106
+ if (timer !== false) {
107
+ clearTimeout(timer);
108
+ }
109
+ timer = setTimeout(function() {
110
+ if(widthFlag === 'smt') {
111
+ sliderSMT();
112
+ } else if(widthFlag === 'pc') {
113
+ sliderPC();
114
+ }
115
+ }, 500);
116
+
117
+ });
118
+
75
119
  ```
76
120
 
77
121
 

3

HTML見やすく修正

2018/02/07 02:33

投稿

yytop
yytop

スコア20

title CHANGED
File without changes
body CHANGED
@@ -87,7 +87,9 @@
87
87
  <!-- WordPressのjQueryを読み込ませない -->
88
88
  <?php wp_deregister_script('jquery'); ?>
89
89
 
90
+ うまくいっているベタなHTMLとうまくいかないWPからのHTMLを追記します。
90
91
  ＜ベタなHTML＞
92
+ ``` html
91
93
  <div class="slide">
92
94
  <div class="sliderBox sliderBox1">
93
95
  <div class="innerBox">
@@ -114,9 +116,10 @@
114
116
  </div>
115
117
  <!--/slide-->
116
118
  </div>
119
+ ```
117
120
 
118
-
119
121
  ＜WPで処理した際のHTML＞
122
+ ``` html
120
123
  <div class="slide">
121
124
  <div class="sliderBox sliderBox1">
122
125
  <div class="innerBox">
@@ -144,4 +147,5 @@
144
147
  </ul>
145
148
  </div>
146
149
  <!--/slide-->
147
- </div>
150
+ </div>
151
+ ```

2

HTMLの追加（文字数の関係で少し省略しています）

2018/02/06 15:58

投稿

yytop
yytop

スコア20

title CHANGED
File without changes
body CHANGED
@@ -5,20 +5,6 @@
5
5
  ### 発生している問題・エラーメッセージ
6
6
 
7
7
  ```
8
- Uncaught TypeError: slider_smt1_2.goToSlide is not a function　slider.js:70
9
- at Object.onSlideBefore (slider.js:67)
10
- at n.fn.init.el.goToSlide (jquery.bxslider.js:1035)
11
- at n.fn.init.el.goToPrevSlide (jquery.bxslider.js:1120)
12
- at HTMLAnchorElement.clickPrevBind (jquery.bxslider.js:642)
13
- at HTMLAnchorElement.dispatch (jquery.min.js:3)
14
- at HTMLAnchorElement.r.handle (jquery.min.js:3)
15
- onSlideBefore @ slider.js:67
16
- el.goToSlide @ jquery.bxslider.js:1035
17
- el.goToPrevSlide @ jquery.bxslider.js:1120
18
- clickPrevBind @ jquery.bxslider.js:642
19
- dispatch @ jquery.min.js:3
20
- r.handle @ jquery.min.js:3
21
-
22
8
  Uncaught TypeError: slider_smt1_1.goToSlide is not a function
23
9
  at Object.onSlideNext (slider.js:70)
24
10
  at n.fn.init.el.goToSlide (jquery.bxslider.js:1037)
@@ -63,34 +49,6 @@
63
49
  </div>
64
50
  ```
65
51
  ``` javascript
66
- var optionPC = {
67
- auto:false,
68
- speed:700,
69
- captions: false,
70
- controls: true,
71
- nextText: '',
72
- prevText: '',
73
- useCSS: false,
74
- }
75
- var optionSMT1 = {
76
- auto:false,
77
- speed:700,
78
- captions: false,
79
- controls: true,
80
- nextText: '',
81
- prevText: '',
82
- useCSS: false,
83
- }
84
- var optionSMT2 = {
85
- pager: false,
86
- minSlides: 3,
87
- maxSlides: 3,
88
- moveSlides: 1,
89
- slideWidth: 110,
90
- slideMargin: 0,
91
- }
92
-
93
-
94
52
  function sliderPC(){
95
53
  var slider_pc1 = $('.sliderBox1').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox1'}));
96
54
  var slider_pc2 = $('.sliderBox2').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox2'}));
@@ -113,67 +71,6 @@
113
71
  onSlidePrev: function($slideElement, oldIndex, newIndex) {slider_smt1_1.goToSlide(newIndex);}
114
72
  }));
115
73
 
116
- //2
117
- var slider_smt2_1 = $('.sliderBox2').bxSlider($.extend(optionSMT1,{
118
- pagerCustom: '.thumbBox2',
119
- onSlideBefore: function($slideElement, oldIndex, newIndex) {slider_smt2_2.goToSlide(newIndex);}
120
- }));
121
- var slider_smt2_2 = $('.thumbBox2').bxSlider($.extend(optionSMT2,{
122
- onSlideNext: function($slideElement, oldIndex, newIndex) {slider_smt2_1.goToSlide(newIndex);},
123
- onSlidePrev: function($slideElement, oldIndex, newIndex) {slider_smt2_1.goToSlide(newIndex);}
124
- }));
125
-
126
- //3
127
- var slider_smt3_1 = $('.sliderBox3').bxSlider($.extend(optionSMT1,{
128
- pagerCustom: '.thumbBox3',
129
- onSlideBefore: function($slideElement, oldIndex, newIndex) {slider_smt3_2.goToSlide(newIndex);}
130
- }));
131
- var slider_smt3_2 = $('.thumbBox3').bxSlider($.extend(optionSMT2,{
132
- onSlideNext: function($slideElement, oldIndex, newIndex) {slider_smt3_1.goToSlide(newIndex);},
133
- onSlidePrev: function($slideElement, oldIndex, newIndex) {slider_smt3_1.goToSlide(newIndex);}
134
- }));
135
-
136
- //4
137
- var slider_smt4_1 = $('.sliderBox4').bxSlider($.extend(optionSMT1,{
138
- pagerCustom: '.thumbBox4',
139
- onSlideBefore: function($slideElement, oldIndex, newIndex) {slider_smt4_2.goToSlide(newIndex);}
140
- }));
141
- var slider_smt4_2 = $('.thumbBox4').bxSlider($.extend(optionSMT2,{
142
- onSlideNext: function($slideElement, oldIndex, newIndex) {slider_smt4_1.goToSlide(newIndex);},
143
- onSlidePrev: function($slideElement, oldIndex, newIndex) {slider_smt4_1.goToSlide(newIndex);}
144
- }));
145
-
146
- //5
147
- var slider_smt5_1 = $('.sliderBox5').bxSlider($.extend(optionSMT1,{
148
- pagerCustom: '.thumbBox5',
149
- onSlideBefore: function($slideElement, oldIndex, newIndex) {slider_smt5_2.goToSlide(newIndex);}
150
- }));
151
- var slider_smt5_2 = $('.thumbBox5').bxSlider($.extend(optionSMT2,{
152
- onSlideNext: function($slideElement, oldIndex, newIndex) {slider_smt5_1.goToSlide(newIndex);},
153
- onSlidePrev: function($slideElement, oldIndex, newIndex) {slider_smt5_1.goToSlide(newIndex);}
154
- }));
155
-
156
- //6
157
- var slider_smt6_1 = $('.sliderBox6').bxSlider($.extend(optionSMT1,{
158
- pagerCustom: '.thumbBox6',
159
- onSlideBefore: function($slideElement, oldIndex, newIndex) {slider_smt6_2.goToSlide(newIndex);}
160
- }));
161
- var slider_smt6_2 = $('.thumbBox6').bxSlider($.extend(optionSMT2,{
162
- onSlideNext: function($slideElement, oldIndex, newIndex) {slider_smt6_1.goToSlide(newIndex);},
163
- onSlidePrev: function($slideElement, oldIndex, newIndex) {slider_smt6_1.goToSlide(newIndex);}
164
- }));
165
-
166
- //7
167
- var slider_smt7_1 = $('.sliderBox7').bxSlider($.extend(optionSMT1,{
168
- pagerCustom: '.thumbBox7',
169
- onSlideBefore: function($slideElement, oldIndex, newIndex) {slider_smt7_2.goToSlide(newIndex);}
170
- }));
171
- var slider_smt7_2 = $('.thumbBox7').bxSlider($.extend(optionSMT2,{
172
- onSlideNext: function($slideElement, oldIndex, newIndex) {slider_smt7_1.goToSlide(newIndex);},
173
- onSlidePrev: function($slideElement, oldIndex, newIndex) {slider_smt7_1.goToSlide(newIndex);}
174
- }));
175
-
176
-
177
74
  }
178
75
  ```
179
76
 
@@ -188,4 +85,63 @@
188
85
  ＜追記＞
189
86
  WordPressのjQueryが悪さしているかと思い、下記をheader.phpに記述してみましたがだめでした。。
190
87
  <!-- WordPressのjQueryを読み込ませない -->
191
- <?php wp_deregister_script('jquery'); ?>
88
+ <?php wp_deregister_script('jquery'); ?>
89
+
90
+ ＜ベタなHTML＞
91
+ <div class="slide">
92
+ <div class="sliderBox sliderBox1">
93
+ <div class="innerBox">
94
+ <p class="img"><img src="images/test.png"></p>
95
+ <div class="txtBox">
96
+ <p class="txt">1-1.テスト</p>
97
+ <p class="btn"><a href="#">more</a></p>
98
+ </div>
99
+ </div>
100
+ <div class="innerBox">
101
+ <p class="img"><img src="images/test.png"></p>
102
+ <div class="txtBox">
103
+ <p class="txt">1-2.テスト</p>
104
+ <p class="btn"><a href="#">more</a></p>
105
+ </div>
106
+ </div>
107
+ <!--/sliderBox-->
108
+ </div>
109
+ <div>
110
+ <ul class="thumbBox thumbBox1"><!--
111
+ --><li><a data-slide-index="0" href="#"><span><img src="images/test.png" /></span></a></li><!--
112
+ --><li><a data-slide-index="1" href="#"><span><img src="images/test.png" /></span></a></li><!--
113
+ --></ul>
114
+ </div>
115
+ <!--/slide-->
116
+ </div>
117
+
118
+
119
+ ＜WPで処理した際のHTML＞
120
+ <div class="slide">
121
+ <div class="sliderBox sliderBox1">
122
+ <div class="innerBox">
123
+ <p class="img"><img width="213" height="300" src="http://my-domain.jp/wp-content/uploads/2018/01/test-213x300.png" class="attachment-medium size-medium wp-post-image" alt="" srcset="http://my-domain.jp/wp-content/uploads/2018/01/test-213x300.png 213w, http://my-domain.jp/wp-content/uploads/2018/01/test.png 690w" sizes="(max-width: 213px) 100vw, 213px" /></p>
124
+ <div class="txtBox">
125
+ <h4>テスト5</h4>
126
+ <p class="txt">テスト本文5</p>
127
+ <p class="btn"><a href="http://my-domain.jp/test-2-2-2-2/">more</a></p>
128
+ </div>
129
+ </div>
130
+ <div class="innerBox">
131
+ <p class="img"><img width="213" height="300" src="http://my-domain.jp/wp-content/uploads/2018/01/test-213x300.png" class="attachment-medium size-medium wp-post-image" alt="" srcset="http://my-domain.jp/wp-content/uploads/2018/01/test-213x300.png 213w, http://my-domain.jp/wp-content/uploads/2018/01/test.png 690w" sizes="(max-width: 213px) 100vw, 213px" /></p>
132
+ <div class="txtBox">
133
+ <h4>テスト4</h4>
134
+ <p class="txt">テスト本文4</p>
135
+ <p class="btn"><a href="http://my-domain.jp/test-2-2-2/">more</a></p>
136
+ </div>
137
+ </div>
138
+ <!--/sliderBox-->
139
+ </div>
140
+ <div>
141
+ <ul class="thumbBox thumbBox1">
142
+ <li><a data-slide-index="0" href="#"><span><img width="150" height="150" src="http://my-domain.jp/wp-content/uploads/2018/01/test-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /></span></a></li>
143
+ <li><a data-slide-index="1" href="#"><span><img width="150" height="150" src="http://my-domain.jp/wp-content/uploads/2018/01/test-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /></span></a></li>
144
+ </ul>
145
+ </div>
146
+ <!--/slide-->
147
+ </div>

1

試したことを追記しました。

2018/02/06 15:51

投稿

yytop
yytop

スコア20

title CHANGED
File without changes
body CHANGED
@@ -183,4 +183,9 @@
183
183
  試しにベタなPHPをやめてベタなHTMLで動かしてみたところ、PC・スマホともうまく動作しました。
184
184
  （デベロッパーツールでもエラーはありませんでした）
185
185
  WordPress上ではうまくいかない理由が何かありそうでしょうか。。
186
- どなたかお助けいただければ幸いです。m(__)m
186
+ どなたかお助けいただければ幸いです。m(__)m
187
+
188
+ ＜追記＞
189
+ WordPressのjQueryが悪さしているかと思い、下記をheader.phpに記述してみましたがだめでした。。
190
+ <!-- WordPressのjQueryを読み込ませない -->
191
+ <?php wp_deregister_script('jquery'); ?>