質問編集履歴
2
変更
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に変更
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
|
+
よろしくお願いします。
|