teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問bxsliderで最後のスライドが最初に来てしまうバグ

編集履歴

質問編集履歴

3

内容の修正（自分で試してみたこと）

2020/02/04 00:55

投稿

mmngchip
mmngchip

スコア19

test CHANGED
File without changes
test CHANGED
@@ -6,6 +6,20 @@
6
6
 
7
7
 
8
8
 
9
+ 下記のサイトを参考に書き換えてみたのですが、直りませんでした。
10
+
11
+
12
+
13
+ ＜参考サイト＞
14
+
15
+ [最後のスライダー画像が最初に表示されてしまう！そんな時に考えられる要因と対処方法３つ！](https://wemo.tech/62)
16
+
17
+
18
+
19
+
20
+
21
+ 最初に記述していたjsは下記です。
22
+
9
23
  ```js
10
24
 
11
25
  $(function(){
@@ -92,6 +106,118 @@
92
106
 
93
107
 
94
108
 
109
+ 参考サイトを元に記述したjsは下記です。
110
+
111
+ ```js
112
+
113
+ $(window).on('load', function(){
114
+
115
+ var slider = $('#bxSlider01 ul').bxSlider();
116
+
117
+ var pauseTime = 5000;
118
+
119
+
120
+
121
+ function sliderSetting(){
122
+
123
+ var windowWidth = jQuery(window).width();
124
+
125
+ var width = windowWidth / 1.4;
126
+
127
+ if(width > 768){
128
+
129
+ slider.reloadSlider({
130
+
131
+ startSlide: 0,
132
+
133
+ speed: 3000,
134
+
135
+ slideMargin: 35,
136
+
137
+ pager: true, /*ページ送りを追加するかどうかの設定*/
138
+
139
+ controls: false, /*前後のコントロールを追加するかどうかの設定。*/
140
+
141
+ auto: false, /*自動スライドの設定*/
142
+
143
+ minSlider: 3,
144
+
145
+ maxSlides: 3,
146
+
147
+ moveSlides: 1, /*一度のスライド時に移動するスライド数*/
148
+
149
+ autoHover: true,
150
+
151
+ slideWidth: 310,
152
+
153
+ autoControls: false,
154
+
155
+ pause: pauseTime
156
+
157
+ });
158
+
159
+ setTimeout(function(){
160
+
161
+ slider.goToSlide(1);
162
+
163
+ slider.startAuto();
164
+
165
+ },pauseTime);
166
+
167
+ } else {
168
+
169
+ slider.reloadSlider({
170
+
171
+ speed: 1000,
172
+
173
+ pager: true, /*ページ送りを追加するかどうかの設定*/
174
+
175
+ controls: true, /*前後のコントロールを追加するかどうかの設定。*/
176
+
177
+ auto: false, /*自動スライドの設定*/
178
+
179
+ minSlider: 1,
180
+
181
+ maxSlides: 1,
182
+
183
+ moveSlides: 1, /*一度のスライド時に移動するスライド数*/
184
+
185
+ slideWidth: width
186
+
187
+ });
188
+
189
+ }
190
+
191
+ }
192
+
193
+ // 初期表示時の実行
194
+
195
+ sliderSetting();
196
+
197
+ // リサイズ時の実行
198
+
199
+ $(window).resize( function() {
200
+
201
+ sliderSetting();
202
+
203
+ });
204
+
205
+ });/*function閉じ*/
206
+
207
+ ```
208
+
209
+ 参考サイトに記載の
210
+
211
+ ・[ど定番の対処法](https://wemo.tech/62#index_id0)
212
+
213
+ ・[最初だけautoをfalseにしておく](https://wemo.tech/62#index_id1)
214
+
215
+ ・[最終手段](https://wemo.tech/62#index_id4)
216
+
217
+ の3点とも試してみたのですが、変化有りませんでした。
218
+
219
+
220
+
95
221
  ご教示いただければ幸いです。
96
222
 
97
223
  よろしくお願いいたします。

2

質問内容を戻しました

2020/02/04 00:54

投稿

mmngchip
mmngchip

スコア19

test CHANGED
File without changes
test CHANGED
@@ -5,20 +5,6 @@
5
5
  最初は必ず3つ（最後から3つ）が一気にスライドしてしまいます。
6
6
 
7
7
 
8
-
9
- 下記のサイトを参考に書き換えてみたのですが、直りませんでした。
10
-
11
-
12
-
13
- ＜参考サイト＞
14
-
15
- [最後のスライダー画像が最初に表示されてしまう！そんな時に考えられる要因と対処方法３つ！](https://wemo.tech/62)
16
-
17
-
18
-
19
-
20
-
21
- 最初に記述していたjsは下記です。
22
8
 
23
9
  ```js
24
10
 
@@ -106,118 +92,6 @@
106
92
 
107
93
 
108
94
 
109
- 参考サイトを元に記述したjsは下記です。
110
-
111
- ```js
112
-
113
- $(window).on('load', function(){
114
-
115
- var slider = $('#bxSlider01 ul').bxSlider();
116
-
117
- var pauseTime = 5000;
118
-
119
-
120
-
121
- function sliderSetting(){
122
-
123
- var windowWidth = jQuery(window).width();
124
-
125
- var width = windowWidth / 1.4;
126
-
127
- if(width > 768){
128
-
129
- slider.reloadSlider({
130
-
131
- startSlide: 0,
132
-
133
- speed: 3000,
134
-
135
- slideMargin: 35,
136
-
137
- pager: true, /*ページ送りを追加するかどうかの設定*/
138
-
139
- controls: false, /*前後のコントロールを追加するかどうかの設定。*/
140
-
141
- auto: false, /*自動スライドの設定*/
142
-
143
- minSlider: 3,
144
-
145
- maxSlides: 3,
146
-
147
- moveSlides: 1, /*一度のスライド時に移動するスライド数*/
148
-
149
- autoHover: true,
150
-
151
- slideWidth: 310,
152
-
153
- autoControls: false,
154
-
155
- pause: pauseTime
156
-
157
- });
158
-
159
- setTimeout(function(){
160
-
161
- slider.goToSlide(1);
162
-
163
- slider.startAuto();
164
-
165
- },pauseTime);
166
-
167
- } else {
168
-
169
- slider.reloadSlider({
170
-
171
- speed: 1000,
172
-
173
- pager: true, /*ページ送りを追加するかどうかの設定*/
174
-
175
- controls: true, /*前後のコントロールを追加するかどうかの設定。*/
176
-
177
- auto: false, /*自動スライドの設定*/
178
-
179
- minSlider: 1,
180
-
181
- maxSlides: 1,
182
-
183
- moveSlides: 1, /*一度のスライド時に移動するスライド数*/
184
-
185
- slideWidth: width
186
-
187
- });
188
-
189
- }
190
-
191
- }
192
-
193
- // 初期表示時の実行
194
-
195
- sliderSetting();
196
-
197
- // リサイズ時の実行
198
-
199
- $(window).resize( function() {
200
-
201
- sliderSetting();
202
-
203
- });
204
-
205
- });/*function閉じ*/
206
-
207
- ```
208
-
209
- 参考サイトに記載の
210
-
211
- ・[ど定番の対処法](https://wemo.tech/62#index_id0)
212
-
213
- ・[最初だけautoをfalseにしておく](https://wemo.tech/62#index_id1)
214
-
215
- ・[最終手段](https://wemo.tech/62#index_id4)
216
-
217
- の3点とも試してみたのですが、変化有りませんでした。
218
-
219
-
220
-
221
95
  ご教示いただければ幸いです。
222
96
 
223
97
  よろしくお願いいたします。

1

参考サイトを元にバグの修正を試みましたが、うまくいきませんでした。

2020/02/03 06:17

投稿

mmngchip
mmngchip

スコア19

test CHANGED
File without changes
test CHANGED
@@ -6,152 +6,218 @@
6
6
 
7
7
 
8
8
 
9
- bxsliderのバグについては調べてみたのですが、
9
+ 下記のサイトを参考に書き換えてみたのですが、直りませんでした。
10
-
10
+
11
+
12
+
11
- 参考にして書いた下記に記載のスライダーのソースと、
13
+ ＜参考サイト＞
12
-
14
+
13
- バグについて書かれている直し方のソースと一致しないため
15
+ [最後のスライダー画像が最初に表示されてしまう！そんな時に考えられる要因と対処方法３つ！](https://wemo.tech/62)
14
-
15
- どこをどういじればよいか見当がつきません。
16
+
16
-
17
-
18
-
17
+
18
+
19
+
20
+
19
- ご教示いただけますと幸いです。
21
+ 最初に記述していたjsは下記です。
20
-
21
-
22
22
 
23
23
  ```js
24
24
 
25
25
  $(function(){
26
26
 
27
- var slider = $('#bxSlider01 ul').bxSlider();
28
-
29
-
30
-
31
- function sliderSetting(){
32
-
33
- var windowWidth = jQuery(window).width();
34
-
35
- var width = windowWidth / 1.4;
36
-
37
- if(width > 768){
38
-
39
- slider.reloadSlider({
40
-
41
- speed: 3000,
42
-
43
- slideMargin: 35,
44
-
45
- pause: 5000,
46
-
47
- pager: true, /*ページ送りを追加するかどうかの設定*/
48
-
49
- controls: false, /*前後のコントロールを追加するかどうかの設定。*/
50
-
51
- auto: true, /*自動スライドの設定*/
52
-
53
- minSlider: 3,
54
-
55
- maxSlides: 3,
56
-
57
- moveSlides: 1, /*一度のスライド時に移動するスライド数*/
58
-
59
- autoHover: true,
60
-
61
- slideWidth: 310
62
-
63
- });
64
-
65
- } else {
66
-
67
- slider.reloadSlider({
68
-
69
- speed: 1000,
70
-
71
- pager: true, /*ページ送りを追加するかどうかの設定*/
72
-
73
- controls: true, /*前後のコントロールを追加するかどうかの設定。*/
74
-
75
- auto: false, /*自動スライドの設定*/
76
-
77
- minSlider: 1,
78
-
79
- maxSlides: 1,
80
-
81
- moveSlides: 1, /*一度のスライド時に移動するスライド数*/
82
-
83
- slideWidth: width
84
-
85
- });
27
+ var slider = $('#bxSlider01 ul').bxSlider();
28
+
29
+
30
+
31
+ function sliderSetting(){
32
+
33
+ var windowWidth = jQuery(window).width();
34
+
35
+ var width = windowWidth / 1.4;
36
+
37
+ if(width > 768){
38
+
39
+ slider.reloadSlider({
40
+
41
+ speed: 3000,
42
+
43
+ slideMargin: 35,
44
+
45
+ pause: 5000,
46
+
47
+ pager: true, /*ページ送りを追加するかどうかの設定*/
48
+
49
+ controls: false, /*前後のコントロールを追加するかどうかの設定。*/
50
+
51
+ auto: true, /*自動スライドの設定*/
52
+
53
+ minSlider: 3,
54
+
55
+ maxSlides: 3,
56
+
57
+ moveSlides: 1, /*一度のスライド時に移動するスライド数*/
58
+
59
+ autoHover: true,
60
+
61
+ slideWidth: 310
62
+
63
+ });
64
+
65
+ } else {
66
+
67
+ slider.reloadSlider({
68
+
69
+ speed: 1000,
70
+
71
+ pager: true, /*ページ送りを追加するかどうかの設定*/
72
+
73
+ controls: true, /*前後のコントロールを追加するかどうかの設定。*/
74
+
75
+ auto: false, /*自動スライドの設定*/
76
+
77
+ minSlider: 1,
78
+
79
+ maxSlides: 1,
80
+
81
+ moveSlides: 1, /*一度のスライド時に移動するスライド数*/
82
+
83
+ slideWidth: width
84
+
85
+ });
86
+
87
+ }
86
88
 
87
89
  }
88
90
 
89
- }
90
-
91
- // 初期表示時の実行
91
+ // 初期表示時の実行
92
-
93
- sliderSetting();
94
-
95
- // リサイズ時の実行
96
-
97
- $(window).resize( function() {
98
92
 
99
93
  sliderSetting();
100
94
 
95
+ // リサイズ時の実行
96
+
97
+ $(window).resize( function() {
98
+
99
+ sliderSetting();
100
+
101
- });
101
+ });
102
102
 
103
103
  });/*function閉じ*/
104
104
 
105
105
  ```
106
106
 
107
- ```html
108
-
109
- <div id="bxSlider01">
110
-
111
- <ul class="colThree cont">
112
-
113
- <li class="contChild">
114
-
115
- <figure><img src="images/index01.jpg" width="310" height="200" alt=""/></figure>
116
-
117
- <p>あああああああああああああああああああああああ</p>
118
-
119
- <!--contChild--></li>
120
-
121
- <li class="contChild">
122
-
123
- <figure><img src="images/index02.jpg" width="310" height="200" alt=""/></figure>
124
-
125
- <p>いいいいいいいいいいいいいいいいいいいいいいい</p>
126
-
127
- <!--contChild--></li>
128
-
129
- <li class="contChild">
130
-
131
- <figure><img src="images/index03.jpg" width="310" height="200" alt=""/></figure>
132
-
133
- <p>ううううううううううううううううううううううう</p>
134
-
135
- <!--contChild--></li>
136
-
137
- <li class="contChild">
138
-
139
- <figure><img src="images/index04.jpg" width="310" height="200" alt=""/></figure>
140
-
141
- <p>えええええええええええええええええええええええ</p>
142
-
143
- <!--contChild--></li>
144
-
145
- <li class="contChild">
146
-
147
- <figure><img src="images/index05.jpg" width="310" height="200" alt=""/></figure>
148
-
149
- <p>おおおおおおおおおおおおおおおおおおおおおおお</p>
150
-
151
- <!--contChild--></li>
152
-
153
- <!--colThree cont--></ul>
154
-
155
- <!--bxSlider01--></div>
107
+
108
+
109
+ 参考サイトを元に記述したjsは下記です。
110
+
111
+ ```js
112
+
113
+ $(window).on('load', function(){
114
+
115
+ var slider = $('#bxSlider01 ul').bxSlider();
116
+
117
+ var pauseTime = 5000;
118
+
119
+
120
+
121
+ function sliderSetting(){
122
+
123
+ var windowWidth = jQuery(window).width();
124
+
125
+ var width = windowWidth / 1.4;
126
+
127
+ if(width > 768){
128
+
129
+ slider.reloadSlider({
130
+
131
+ startSlide: 0,
132
+
133
+ speed: 3000,
134
+
135
+ slideMargin: 35,
136
+
137
+ pager: true, /*ページ送りを追加するかどうかの設定*/
138
+
139
+ controls: false, /*前後のコントロールを追加するかどうかの設定。*/
140
+
141
+ auto: false, /*自動スライドの設定*/
142
+
143
+ minSlider: 3,
144
+
145
+ maxSlides: 3,
146
+
147
+ moveSlides: 1, /*一度のスライド時に移動するスライド数*/
148
+
149
+ autoHover: true,
150
+
151
+ slideWidth: 310,
152
+
153
+ autoControls: false,
154
+
155
+ pause: pauseTime
156
+
157
+ });
158
+
159
+ setTimeout(function(){
160
+
161
+ slider.goToSlide(1);
162
+
163
+ slider.startAuto();
164
+
165
+ },pauseTime);
166
+
167
+ } else {
168
+
169
+ slider.reloadSlider({
170
+
171
+ speed: 1000,
172
+
173
+ pager: true, /*ページ送りを追加するかどうかの設定*/
174
+
175
+ controls: true, /*前後のコントロールを追加するかどうかの設定。*/
176
+
177
+ auto: false, /*自動スライドの設定*/
178
+
179
+ minSlider: 1,
180
+
181
+ maxSlides: 1,
182
+
183
+ moveSlides: 1, /*一度のスライド時に移動するスライド数*/
184
+
185
+ slideWidth: width
186
+
187
+ });
188
+
189
+ }
190
+
191
+ }
192
+
193
+ // 初期表示時の実行
194
+
195
+ sliderSetting();
196
+
197
+ // リサイズ時の実行
198
+
199
+ $(window).resize( function() {
200
+
201
+ sliderSetting();
202
+
203
+ });
204
+
205
+ });/*function閉じ*/
156
206
 
157
207
  ```
208
+
209
+ 参考サイトに記載の
210
+
211
+ ・[ど定番の対処法](https://wemo.tech/62#index_id0)
212
+
213
+ ・[最初だけautoをfalseにしておく](https://wemo.tech/62#index_id1)
214
+
215
+ ・[最終手段](https://wemo.tech/62#index_id4)
216
+
217
+ の3点とも試してみたのですが、変化有りませんでした。
218
+
219
+
220
+
221
+ ご教示いただければ幸いです。
222
+
223
+ よろしくお願いいたします。