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

編集履歴

質問編集履歴

7

テスト用URLの削除

2018/02/19 14:35

投稿

yytop
yytop

スコア20

test CHANGED
File without changes
test CHANGED
@@ -427,23 +427,3 @@
427
427
  </div>
428
428
 
429
429
  ```
430
-
431
- ＜追記2＞
432
-
433
- スマホでの動作確認用のテストURLを作りました。
434
-
435
- 真ん中くらいの「制作実績」の部分です。
436
-
437
- （解決するまで限定です）
438
-
439
-
440
-
441
- ＜うまくいかないWPのサイト＞
442
-
443
- http://yytop.ciao.jp/test180207/
444
-
445
-
446
-
447
- ＜うまく動作する静的HTML＞
448
-
449
- http://yytop.ciao.jp/test180207/html/index.html

6

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

2018/02/19 14:35

投稿

yytop
yytop

スコア20

test CHANGED
File without changes
test CHANGED
@@ -427,3 +427,23 @@
427
427
  </div>
428
428
 
429
429
  ```
430
+
431
+ ＜追記2＞
432
+
433
+ スマホでの動作確認用のテストURLを作りました。
434
+
435
+ 真ん中くらいの「制作実績」の部分です。
436
+
437
+ （解決するまで限定です）
438
+
439
+
440
+
441
+ ＜うまくいかないWPのサイト＞
442
+
443
+ http://yytop.ciao.jp/test180207/
444
+
445
+
446
+
447
+ ＜うまく動作する静的HTML＞
448
+
449
+ http://yytop.ciao.jp/test180207/html/index.html

5

javascript追記しました

2018/02/07 14:14

投稿

yytop
yytop

スコア20

test CHANGED
File without changes
test CHANGED
@@ -100,6 +100,46 @@
100
100
 
101
101
  ``` javascript
102
102
 
103
+ var replaceWidth = 768,
104
+
105
+ winW,
106
+
107
+ winH,
108
+
109
+ widthFlag;
110
+
111
+
112
+
113
+ //■ デバイス判定
114
+
115
+ $(window).on('load resize', function() {
116
+
117
+
118
+
119
+ winW = $(window).width();
120
+
121
+ winH = $(window).height();
122
+
123
+
124
+
125
+ if(winW <= replaceWidth && widthFlag !== 'smt') {
126
+
127
+ widthFlag = 'smt';
128
+
129
+ } else if(winW > replaceWidth && widthFlag !== 'pc') {
130
+
131
+ widthFlag = 'pc';
132
+
133
+ }
134
+
135
+ });
136
+
137
+
138
+
139
+
140
+
141
+ //*******************************************************************//
142
+
103
143
  var optionPC = {
104
144
 
105
145
  auto:false,

4

Javascript追記しました

2018/02/07 03:43

投稿

yytop
yytop

スコア20

test CHANGED
File without changes
test CHANGED
@@ -100,6 +100,60 @@
100
100
 
101
101
  ``` javascript
102
102
 
103
+ var optionPC = {
104
+
105
+ auto:false,
106
+
107
+ speed:700,
108
+
109
+ captions: false,
110
+
111
+ controls: true,
112
+
113
+ nextText: '',
114
+
115
+ prevText: '',
116
+
117
+ useCSS: false,
118
+
119
+ }
120
+
121
+ var optionSMT1 = {
122
+
123
+ auto:false,
124
+
125
+ speed:700,
126
+
127
+ captions: false,
128
+
129
+ controls: true,
130
+
131
+ nextText: '',
132
+
133
+ prevText: '',
134
+
135
+ useCSS: false,
136
+
137
+ }
138
+
139
+ var optionSMT2 = {
140
+
141
+ pager: false,
142
+
143
+ minSlides: 3,
144
+
145
+ maxSlides: 3,
146
+
147
+ moveSlides: 1,
148
+
149
+ slideWidth: 110,
150
+
151
+ slideMargin: 0,
152
+
153
+ }
154
+
155
+
156
+
103
157
  function sliderPC(){
104
158
 
105
159
  var slider_pc1 = $('.sliderBox1').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox1'}));
@@ -146,6 +200,40 @@
146
200
 
147
201
  }
148
202
 
203
+
204
+
205
+ var timer = false;
206
+
207
+ $(window).load(function() {
208
+
209
+
210
+
211
+ if (timer !== false) {
212
+
213
+ clearTimeout(timer);
214
+
215
+ }
216
+
217
+ timer = setTimeout(function() {
218
+
219
+ if(widthFlag === 'smt') {
220
+
221
+ sliderSMT();
222
+
223
+ } else if(widthFlag === 'pc') {
224
+
225
+ sliderPC();
226
+
227
+ }
228
+
229
+ }, 500);
230
+
231
+
232
+
233
+ });
234
+
235
+
236
+
149
237
  ```
150
238
 
151
239
 

3

HTML見やすく修正

2018/02/07 02:33

投稿

yytop
yytop

スコア20

test CHANGED
File without changes
test CHANGED
@@ -176,8 +176,12 @@
176
176
 
177
177
 
178
178
 
179
+ うまくいっているベタなHTMLとうまくいかないWPからのHTMLを追記します。
180
+
179
181
  ＜ベタなHTML＞
180
182
 
183
+ ``` html
184
+
181
185
  <div class="slide">
182
186
 
183
187
  <div class="sliderBox sliderBox1">
@@ -230,12 +234,14 @@
230
234
 
231
235
  </div>
232
236
 
233
-
237
+ ```
234
238
 
235
239
 
236
240
 
237
241
  ＜WPで処理した際のHTML＞
238
242
 
243
+ ``` html
244
+
239
245
  <div class="slide">
240
246
 
241
247
  <div class="sliderBox sliderBox1">
@@ -291,3 +297,5 @@
291
297
  <!--/slide-->
292
298
 
293
299
  </div>
300
+
301
+ ```

2

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

2018/02/06 15:58

投稿

yytop
yytop

スコア20

test CHANGED
File without changes
test CHANGED
@@ -12,60 +12,32 @@
12
12
 
13
13
  ```
14
14
 
15
- Uncaught TypeError: slider_smt1_2.goToSlide is not a function　slider.js:70
15
+ Uncaught TypeError: slider_smt1_1.goToSlide is not a function
16
-
16
+
17
- at Object.onSlideBefore (slider.js:67)
17
+ at Object.onSlideNext (slider.js:70)
18
-
18
+
19
- at n.fn.init.el.goToSlide (jquery.bxslider.js:1035)
19
+ at n.fn.init.el.goToSlide (jquery.bxslider.js:1037)
20
-
20
+
21
- at n.fn.init.el.goToPrevSlide (jquery.bxslider.js:1120)
21
+ at n.fn.init.el.goToNextSlide (jquery.bxslider.js:1110)
22
-
22
+
23
- at HTMLAnchorElement.clickPrevBind (jquery.bxslider.js:642)
23
+ at HTMLAnchorElement.clickNextBind (jquery.bxslider.js:629)
24
24
 
25
25
  at HTMLAnchorElement.dispatch (jquery.min.js:3)
26
26
 
27
27
  at HTMLAnchorElement.r.handle (jquery.min.js:3)
28
28
 
29
- onSlideBefore @ slider.js:67
29
+ onSlideNext @ slider.js:70
30
-
30
+
31
- el.goToSlide @ jquery.bxslider.js:1035
31
+ el.goToSlide @ jquery.bxslider.js:1037
32
-
32
+
33
- el.goToPrevSlide @ jquery.bxslider.js:1120
33
+ el.goToNextSlide @ jquery.bxslider.js:1110
34
-
34
+
35
- clickPrevBind @ jquery.bxslider.js:642
35
+ clickNextBind @ jquery.bxslider.js:629
36
36
 
37
37
  dispatch @ jquery.min.js:3
38
38
 
39
39
  r.handle @ jquery.min.js:3
40
40
 
41
-
42
-
43
- Uncaught TypeError: slider_smt1_1.goToSlide is not a function
44
-
45
- at Object.onSlideNext (slider.js:70)
46
-
47
- at n.fn.init.el.goToSlide (jquery.bxslider.js:1037)
48
-
49
- at n.fn.init.el.goToNextSlide (jquery.bxslider.js:1110)
50
-
51
- at HTMLAnchorElement.clickNextBind (jquery.bxslider.js:629)
52
-
53
- at HTMLAnchorElement.dispatch (jquery.min.js:3)
54
-
55
- at HTMLAnchorElement.r.handle (jquery.min.js:3)
56
-
57
- onSlideNext @ slider.js:70
58
-
59
- el.goToSlide @ jquery.bxslider.js:1037
60
-
61
- el.goToNextSlide @ jquery.bxslider.js:1110
62
-
63
- clickNextBind @ jquery.bxslider.js:629
64
-
65
- dispatch @ jquery.min.js:3
66
-
67
- r.handle @ jquery.min.js:3
68
-
69
41
  ```
70
42
 
71
43
 
@@ -128,230 +100,52 @@
128
100
 
129
101
  ``` javascript
130
102
 
131
- var optionPC = {
132
-
133
- auto:false,
134
-
135
- speed:700,
136
-
137
- captions: false,
103
+ function sliderPC(){
138
-
139
- controls: true,
104
+
140
-
141
- nextText: '',
142
-
143
- prevText: '',
105
+ var slider_pc1 = $('.sliderBox1').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox1'}));
144
-
106
+
145
- useCSS: false,
107
+ var slider_pc2 = $('.sliderBox2').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox2'}));
108
+
109
+ var slider_pc3 = $('.sliderBox3').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox3'}));
110
+
111
+ var slider_pc4 = $('.sliderBox4').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox4'}));
112
+
113
+ var slider_pc5 = $('.sliderBox5').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox5'}));
114
+
115
+ var slider_pc6 = $('.sliderBox6').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox6'}));
116
+
117
+ var slider_pc7 = $('.sliderBox7').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox7'}));
146
118
 
147
119
  }
148
120
 
149
- var optionSMT1 = {
121
+
150
-
151
- auto:false,
122
+
152
-
153
- speed:700,
123
+
154
-
124
+
155
- captions: false,
125
+ function sliderSMT(){
156
-
157
- controls: true,
126
+
158
-
159
- nextText: '',
127
+ //1
128
+
160
-
129
+ var slider_smt1_1 = $('.sliderBox1').bxSlider($.extend(optionSMT1,{
130
+
161
- prevText: '',
131
+ pagerCustom: '.thumbBox1',
132
+
162
-
133
+ onSlideBefore: function($slideElement, oldIndex, newIndex) {slider_smt1_2.goToSlide(newIndex);}
134
+
163
- useCSS: false,
135
+ }));
136
+
137
+ var slider_smt1_2 = $('.thumbBox1').bxSlider($.extend(optionSMT2,{
138
+
139
+ onSlideNext: function($slideElement, oldIndex, newIndex) {slider_smt1_1.goToSlide(newIndex);},
140
+
141
+ onSlidePrev: function($slideElement, oldIndex, newIndex) {slider_smt1_1.goToSlide(newIndex);}
142
+
143
+ }));
144
+
145
+
164
146
 
165
147
  }
166
148
 
167
- var optionSMT2 = {
168
-
169
- pager: false,
170
-
171
- minSlides: 3,
172
-
173
- maxSlides: 3,
174
-
175
- moveSlides: 1,
176
-
177
- slideWidth: 110,
178
-
179
- slideMargin: 0,
180
-
181
- }
182
-
183
-
184
-
185
-
186
-
187
- function sliderPC(){
188
-
189
- var slider_pc1 = $('.sliderBox1').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox1'}));
190
-
191
- var slider_pc2 = $('.sliderBox2').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox2'}));
192
-
193
- var slider_pc3 = $('.sliderBox3').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox3'}));
194
-
195
- var slider_pc4 = $('.sliderBox4').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox4'}));
196
-
197
- var slider_pc5 = $('.sliderBox5').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox5'}));
198
-
199
- var slider_pc6 = $('.sliderBox6').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox6'}));
200
-
201
- var slider_pc7 = $('.sliderBox7').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox7'}));
202
-
203
- }
204
-
205
-
206
-
207
-
208
-
209
- function sliderSMT(){
210
-
211
- //1
212
-
213
- var slider_smt1_1 = $('.sliderBox1').bxSlider($.extend(optionSMT1,{
214
-
215
- pagerCustom: '.thumbBox1',
216
-
217
- onSlideBefore: function($slideElement, oldIndex, newIndex) {slider_smt1_2.goToSlide(newIndex);}
218
-
219
- }));
220
-
221
- var slider_smt1_2 = $('.thumbBox1').bxSlider($.extend(optionSMT2,{
222
-
223
- onSlideNext: function($slideElement, oldIndex, newIndex) {slider_smt1_1.goToSlide(newIndex);},
224
-
225
- onSlidePrev: function($slideElement, oldIndex, newIndex) {slider_smt1_1.goToSlide(newIndex);}
226
-
227
- }));
228
-
229
-
230
-
231
- //2
232
-
233
- var slider_smt2_1 = $('.sliderBox2').bxSlider($.extend(optionSMT1,{
234
-
235
- pagerCustom: '.thumbBox2',
236
-
237
- onSlideBefore: function($slideElement, oldIndex, newIndex) {slider_smt2_2.goToSlide(newIndex);}
238
-
239
- }));
240
-
241
- var slider_smt2_2 = $('.thumbBox2').bxSlider($.extend(optionSMT2,{
242
-
243
- onSlideNext: function($slideElement, oldIndex, newIndex) {slider_smt2_1.goToSlide(newIndex);},
244
-
245
- onSlidePrev: function($slideElement, oldIndex, newIndex) {slider_smt2_1.goToSlide(newIndex);}
246
-
247
- }));
248
-
249
-
250
-
251
- //3
252
-
253
- var slider_smt3_1 = $('.sliderBox3').bxSlider($.extend(optionSMT1,{
254
-
255
- pagerCustom: '.thumbBox3',
256
-
257
- onSlideBefore: function($slideElement, oldIndex, newIndex) {slider_smt3_2.goToSlide(newIndex);}
258
-
259
- }));
260
-
261
- var slider_smt3_2 = $('.thumbBox3').bxSlider($.extend(optionSMT2,{
262
-
263
- onSlideNext: function($slideElement, oldIndex, newIndex) {slider_smt3_1.goToSlide(newIndex);},
264
-
265
- onSlidePrev: function($slideElement, oldIndex, newIndex) {slider_smt3_1.goToSlide(newIndex);}
266
-
267
- }));
268
-
269
-
270
-
271
- //4
272
-
273
- var slider_smt4_1 = $('.sliderBox4').bxSlider($.extend(optionSMT1,{
274
-
275
- pagerCustom: '.thumbBox4',
276
-
277
- onSlideBefore: function($slideElement, oldIndex, newIndex) {slider_smt4_2.goToSlide(newIndex);}
278
-
279
- }));
280
-
281
- var slider_smt4_2 = $('.thumbBox4').bxSlider($.extend(optionSMT2,{
282
-
283
- onSlideNext: function($slideElement, oldIndex, newIndex) {slider_smt4_1.goToSlide(newIndex);},
284
-
285
- onSlidePrev: function($slideElement, oldIndex, newIndex) {slider_smt4_1.goToSlide(newIndex);}
286
-
287
- }));
288
-
289
-
290
-
291
- //5
292
-
293
- var slider_smt5_1 = $('.sliderBox5').bxSlider($.extend(optionSMT1,{
294
-
295
- pagerCustom: '.thumbBox5',
296
-
297
- onSlideBefore: function($slideElement, oldIndex, newIndex) {slider_smt5_2.goToSlide(newIndex);}
298
-
299
- }));
300
-
301
- var slider_smt5_2 = $('.thumbBox5').bxSlider($.extend(optionSMT2,{
302
-
303
- onSlideNext: function($slideElement, oldIndex, newIndex) {slider_smt5_1.goToSlide(newIndex);},
304
-
305
- onSlidePrev: function($slideElement, oldIndex, newIndex) {slider_smt5_1.goToSlide(newIndex);}
306
-
307
- }));
308
-
309
-
310
-
311
- //6
312
-
313
- var slider_smt6_1 = $('.sliderBox6').bxSlider($.extend(optionSMT1,{
314
-
315
- pagerCustom: '.thumbBox6',
316
-
317
- onSlideBefore: function($slideElement, oldIndex, newIndex) {slider_smt6_2.goToSlide(newIndex);}
318
-
319
- }));
320
-
321
- var slider_smt6_2 = $('.thumbBox6').bxSlider($.extend(optionSMT2,{
322
-
323
- onSlideNext: function($slideElement, oldIndex, newIndex) {slider_smt6_1.goToSlide(newIndex);},
324
-
325
- onSlidePrev: function($slideElement, oldIndex, newIndex) {slider_smt6_1.goToSlide(newIndex);}
326
-
327
- }));
328
-
329
-
330
-
331
- //7
332
-
333
- var slider_smt7_1 = $('.sliderBox7').bxSlider($.extend(optionSMT1,{
334
-
335
- pagerCustom: '.thumbBox7',
336
-
337
- onSlideBefore: function($slideElement, oldIndex, newIndex) {slider_smt7_2.goToSlide(newIndex);}
338
-
339
- }));
340
-
341
- var slider_smt7_2 = $('.thumbBox7').bxSlider($.extend(optionSMT2,{
342
-
343
- onSlideNext: function($slideElement, oldIndex, newIndex) {slider_smt7_1.goToSlide(newIndex);},
344
-
345
- onSlidePrev: function($slideElement, oldIndex, newIndex) {slider_smt7_1.goToSlide(newIndex);}
346
-
347
- }));
348
-
349
-
350
-
351
-
352
-
353
- }
354
-
355
149
  ```
356
150
 
357
151
 
@@ -379,3 +173,121 @@
379
173
  <!-- WordPressのjQueryを読み込ませない -->
380
174
 
381
175
  <?php wp_deregister_script('jquery'); ?>
176
+
177
+
178
+
179
+ ＜ベタなHTML＞
180
+
181
+ <div class="slide">
182
+
183
+ <div class="sliderBox sliderBox1">
184
+
185
+ <div class="innerBox">
186
+
187
+ <p class="img"><img src="images/test.png"></p>
188
+
189
+ <div class="txtBox">
190
+
191
+ <p class="txt">1-1.テスト</p>
192
+
193
+ <p class="btn"><a href="#">more</a></p>
194
+
195
+ </div>
196
+
197
+ </div>
198
+
199
+ <div class="innerBox">
200
+
201
+ <p class="img"><img src="images/test.png"></p>
202
+
203
+ <div class="txtBox">
204
+
205
+ <p class="txt">1-2.テスト</p>
206
+
207
+ <p class="btn"><a href="#">more</a></p>
208
+
209
+ </div>
210
+
211
+ </div>
212
+
213
+ <!--/sliderBox-->
214
+
215
+ </div>
216
+
217
+ <div>
218
+
219
+ <ul class="thumbBox thumbBox1"><!--
220
+
221
+ --><li><a data-slide-index="0" href="#"><span><img src="images/test.png" /></span></a></li><!--
222
+
223
+ --><li><a data-slide-index="1" href="#"><span><img src="images/test.png" /></span></a></li><!--
224
+
225
+ --></ul>
226
+
227
+ </div>
228
+
229
+ <!--/slide-->
230
+
231
+ </div>
232
+
233
+
234
+
235
+
236
+
237
+ ＜WPで処理した際のHTML＞
238
+
239
+ <div class="slide">
240
+
241
+ <div class="sliderBox sliderBox1">
242
+
243
+ <div class="innerBox">
244
+
245
+ <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>
246
+
247
+ <div class="txtBox">
248
+
249
+ <h4>テスト5</h4>
250
+
251
+ <p class="txt">テスト本文5</p>
252
+
253
+ <p class="btn"><a href="http://my-domain.jp/test-2-2-2-2/">more</a></p>
254
+
255
+ </div>
256
+
257
+ </div>
258
+
259
+ <div class="innerBox">
260
+
261
+ <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>
262
+
263
+ <div class="txtBox">
264
+
265
+ <h4>テスト4</h4>
266
+
267
+ <p class="txt">テスト本文4</p>
268
+
269
+ <p class="btn"><a href="http://my-domain.jp/test-2-2-2/">more</a></p>
270
+
271
+ </div>
272
+
273
+ </div>
274
+
275
+ <!--/sliderBox-->
276
+
277
+ </div>
278
+
279
+ <div>
280
+
281
+ <ul class="thumbBox thumbBox1">
282
+
283
+ <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>
284
+
285
+ <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>
286
+
287
+ </ul>
288
+
289
+ </div>
290
+
291
+ <!--/slide-->
292
+
293
+ </div>

1

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

2018/02/06 15:51

投稿

yytop
yytop

スコア20

test CHANGED
File without changes
test CHANGED
@@ -369,3 +369,13 @@
369
369
  WordPress上ではうまくいかない理由が何かありそうでしょうか。。
370
370
 
371
371
  どなたかお助けいただければ幸いです。m(__)m
372
+
373
+
374
+
375
+ ＜追記＞
376
+
377
+ WordPressのjQueryが悪さしているかと思い、下記をheader.phpに記述してみましたがだめでした。。
378
+
379
+ <!-- WordPressのjQueryを読み込ませない -->
380
+
381
+ <?php wp_deregister_script('jquery'); ?>