teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

変更

2018/11/20 08:55

投稿

roronoazoro
roronoazoro

スコア113

title CHANGED
File without changes
body CHANGED
@@ -67,7 +67,7 @@
67
67
  アドバイスいただけると幸いです。
68
68
  よろしくお願いします。
69
69
 
70
- ## 補足
70
+ ## slick → bx-sliderへ変更しての進捗
71
71
  上記の続きになります。
72
72
  bx-sliderを用いて無限ループは再現できました。
73
73
 

1

bx-sliderに変更

2018/11/20 08:54

投稿

roronoazoro
roronoazoro

スコア113

title CHANGED
File without changes
body CHANGED
@@ -65,4 +65,53 @@
65
65
  </script>
66
66
  ```
67
67
  アドバイスいただけると幸いです。
68
+ よろしくお願いします。
69
+
70
+ ## 補足
71
+ 上記の続きになります。
72
+ bx-sliderを用いて無限ループは再現できました。
73
+
74
+ そして、bx-slider使用して、矢印配置してみましたが、前後の移動がうまくいかず、前ボタンを押すとページ最上部に飛んでしまったりします。
75
+
76
+ **参考サイト**
77
+ [https://stand-4u.com/stand-4u/html/bxslider.html](https://stand-4u.com/stand-4u/html/bxslider.html)
78
+
79
+ 下記コードのイメージです。
80
+ Wrapを起点にprev-btnを画像の右端中央に設定しました。
81
+ アンカータグの`class="bx-prev`が働いて前後に移動できると思うですが、クリックするとページ最上部に飛んでしまいます。
82
+
83
+ この前後の動きがどのように再現できているのかがよく分かっていないので、手探りで修正している状態です。。
84
+
85
+ ```html
86
+ <div class="Wrap">
87
+ <div class="content">
88
+ <div class="slide">
89
+ <img src="画像" alt="">
90
+ </div>
91
+ <div class="slide">
92
+ <img src="画像" alt="">
93
+ </div>
94
+ <div class="slide">
95
+ <img src="画像" alt="">
96
+ </div>
97
+ <div class="slide">
98
+ <img src="画像" alt="">
99
+ </div>
100
+ <div class="slide">
101
+ <img src="画像" alt="">
102
+ </div>
103
+ <div class="slide">
104
+ <img src="画像" alt="">
105
+ </div>
106
+ <div class="slide">
107
+ <img src="画像" alt="">
108
+ </div>
109
+ <div class="slide">
110
+ <img src="画像" alt="">
111
+ </div>
112
+ </div>
113
+ <div class="prev-btn"><img src="矢印画像" alt=""><a class="bx-prev" href=""></a></div>
114
+ </div>
115
+ ```
116
+ なにかアドバイスいただけると幸いです。
68
117
  よろしくお願いします。