質問編集履歴
3
typo
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
デバックの様子です。
|
|
39
39
|
|
|
40
40
|
### 画像が1枚目
|
|
41
|
-
]
|
|
41
|
+
]
|
|
42
42
|
|
|
43
43
|
### 画像が1枚目消える
|
|
44
44
|
|
2
画像 kei
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
ライブラリを使わず、JSでスライダーを作成しようと思っています。
|
|
2
2
|
|
|
3
3
|
## やりたいこと
|
|
4
|
-
- 自動スライド（2秒ごと）
|
|
4
|
+
- ~~自動スライド（2秒ごと）~~
|
|
5
5
|
- 画像を3枚表示（両端の画像は半分表示で見切れさせる）
|
|
6
6
|
|
|
7
7
|
## 仕組み
|
|
@@ -13,18 +13,39 @@
|
|
|
13
13
|
0. スライド関数実行（setinterval）
|
|
14
14
|
|
|
15
15
|
## 悩んでいること
|
|
16
|
-
**画像スライド時の重なり**
|
|
16
|
+
~~**画像スライド時の重なり**
|
|
17
17
|
添付しているコードあくまでローカル確認用になります
|
|
18
18
|
他ファイルに組み込んだ際、横スライドが実現できず、スライドした画像が上に重なってしまいます。
|
|
19
19
|
`slick`などのように、画像が水平移動するのが理想なのですが、こちら`.style.lef`などの指定が問題でしょうか。
|
|
20
|
-
代替案あれば教えていただけますでしょうか。
|
|
20
|
+
代替案あれば教えていただけますでしょうか。~~
|
|
21
21
|
|
|
22
22
|
**画像を3枚表示（両端の画像は半分表示で見切れさせる）**
|
|
23
|
+
計6枚画像があるとして、最後の画像（6枚目）を、1の画像の前に表示させたいです。
|
|
23
24
|
以下のような形にする場合は、cssで操作するのでしょうか。
|
|
24
|
-
厳密には、1と3の画像を半分表示としたいです。
|
|
25
|
-
|
|
26
25
|
|
|
26
|
+
jQueryなどのライブラリだとよく見かけるのですが、JSで作成する方法がわからずにいます。
|
|
27
27
|
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
以下の参考サイトの「画像スライダー」にそって進めました。
|
|
32
|
+
[https://blog.kannart.co.jp/coding/1199/#slide](https://blog.kannart.co.jp/coding/1199/#slide)
|
|
33
|
+
|
|
34
|
+
> // 次のスライドを現在のスライドの進行方向後ろに移動させる
|
|
35
|
+
の`setTimeout`部分を書き換える必要がありそう？な気がしているのですが、100%コードの意味を把握できていない状況です。
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
デバックの様子です。
|
|
39
|
+
|
|
40
|
+
### 画像が1枚目
|
|
41
|
+
](b265e82b867ff7901b94518dff23c337.png)
|
|
42
|
+
|
|
43
|
+
### 画像が1枚目消える
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
### 画像が2枚目が表示される
|
|
47
|
+
|
|
48
|
+
|
|
28
49
|
```html
|
|
29
50
|
<div class="container">
|
|
30
51
|
<div class="wrap">
|
|
@@ -129,7 +150,5 @@
|
|
|
129
150
|
```
|
|
130
151
|
|
|
131
152
|
|
|
132
|
-
参考サイト
|
|
133
|
-
[https://blog.kannart.co.jp/coding/1199/#slide](https://blog.kannart.co.jp/coding/1199/#slide)
|
|
134
153
|
|
|
135
154
|
よろしくお願いします。
|
1
ローカル
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
## 悩んでいること
|
|
16
16
|
**画像スライド時の重なり**
|
|
17
|
-
|
|
17
|
+
添付しているコードあくまでローカル確認用になります
|
|
18
18
|
他ファイルに組み込んだ際、横スライドが実現できず、スライドした画像が上に重なってしまいます。
|
|
19
19
|
`slick`などのように、画像が水平移動するのが理想なのですが、こちら`.style.lef`などの指定が問題でしょうか。
|
|
20
20
|
代替案あれば教えていただけますでしょうか。
|