質問編集履歴

2

変更

2018/11/20 08:55

投稿

roronoazoro
roronoazoro

スコア113

test CHANGED
File without changes
test CHANGED
@@ -136,7 +136,7 @@
136
136
 
137
137
 
138
138
 
139
- ## 補足
139
+ ## slick → bx-sliderへ変更しての進捗
140
140
 
141
141
  上記の続きになります。
142
142
 

1

bx-sliderに変更

2018/11/20 08:54

投稿

roronoazoro
roronoazoro

スコア113

test CHANGED
File without changes
test CHANGED
@@ -133,3 +133,101 @@
133
133
  アドバイスいただけると幸いです。
134
134
 
135
135
  よろしくお願いします。
136
+
137
+
138
+
139
+ ## 補足
140
+
141
+ 上記の続きになります。
142
+
143
+ bx-sliderを用いて無限ループは再現できました。
144
+
145
+
146
+
147
+ そして、bx-slider使用して、矢印配置してみましたが、前後の移動がうまくいかず、前ボタンを押すとページ最上部に飛んでしまったりします。
148
+
149
+
150
+
151
+ **参考サイト**
152
+
153
+ [https://stand-4u.com/stand-4u/html/bxslider.html](https://stand-4u.com/stand-4u/html/bxslider.html)
154
+
155
+
156
+
157
+ 下記コードのイメージです。
158
+
159
+ Wrapを起点にprev-btnを画像の右端中央に設定しました。
160
+
161
+ アンカータグの`class="bx-prev`が働いて前後に移動できると思うですが、クリックするとページ最上部に飛んでしまいます。
162
+
163
+
164
+
165
+ この前後の動きがどのように再現できているのかがよく分かっていないので、手探りで修正している状態です。。
166
+
167
+
168
+
169
+ ```html
170
+
171
+ <div class="Wrap">
172
+
173
+ <div class="content">
174
+
175
+ <div class="slide">
176
+
177
+ <img src="画像" alt="">
178
+
179
+ </div>
180
+
181
+ <div class="slide">
182
+
183
+ <img src="画像" alt="">
184
+
185
+ </div>
186
+
187
+ <div class="slide">
188
+
189
+ <img src="画像" alt="">
190
+
191
+ </div>
192
+
193
+ <div class="slide">
194
+
195
+ <img src="画像" alt="">
196
+
197
+ </div>
198
+
199
+ <div class="slide">
200
+
201
+ <img src="画像" alt="">
202
+
203
+ </div>
204
+
205
+ <div class="slide">
206
+
207
+ <img src="画像" alt="">
208
+
209
+ </div>
210
+
211
+ <div class="slide">
212
+
213
+ <img src="画像" alt="">
214
+
215
+ </div>
216
+
217
+ <div class="slide">
218
+
219
+ <img src="画像" alt="">
220
+
221
+ </div>
222
+
223
+ </div>
224
+
225
+ <div class="prev-btn"><img src="矢印画像" alt=""><a class="bx-prev" href=""></a></div>
226
+
227
+ </div>
228
+
229
+ ```
230
+
231
+ なにかアドバイスいただけると幸いです。
232
+
233
+ よろしくお願いします。