回答編集履歴
5
テキスト追加
test
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
いろいろなやり方があると思いますので、あくまで一例として、以下のような感じでいかがでしょうか？
|
|
6
6
|
|
|
7
|
-
（※矢印に
|
|
7
|
+
（※矢印に[Font Awesome](https://fontawesome.com/) を、ダミーの画像に [dummyimage](https://dummyimage.com/) を使用しています。）
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
4
テキスト修正
test
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
const Thumbnails = ({mainImageIndex, imageUrls}) => {
|
|
16
16
|
|
|
17
|
-
const thumbs = [...Array(
|
|
17
|
+
const thumbs = [...Array(imageUrls.length-1)].map((_, i) =>
|
|
18
18
|
|
|
19
19
|
<div key={i}>
|
|
20
20
|
|
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
|
|
141
141
|
|
|
142
142
|
|
|
143
|
-
[https://jsfiddle.net/jun68ykt/3kt29qzc/
|
|
143
|
+
[https://jsfiddle.net/jun68ykt/3kt29qzc/8/](https://jsfiddle.net/jun68ykt/3kt29qzc/8/)
|
|
144
144
|
|
|
145
145
|
|
|
146
146
|
|
3
テキスト追加
test
CHANGED
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
いろいろなやり方があると思いますので、あくまで一例として、以下のような感じでいかがでしょうか？
|
|
6
|
+
|
|
7
|
+
（※矢印に、[Font Awesome](https://fontawesome.com/) を使用しています。）
|
|
6
8
|
|
|
7
9
|
|
|
8
10
|
|
2
テキスト修正
test
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
const thumbs = [...Array(3)].map((_, i) =>
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
<div key={i}>
|
|
18
18
|
|
|
19
19
|
<img src={imageUrls[(mainImageIndex + i + 1) % imageUrls.length]} />
|
|
20
20
|
|
1
テキスト修正
test
CHANGED
|
@@ -7,6 +7,28 @@
|
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
```javascript
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
const Thumbnails = ({mainImageIndex, imageUrls}) => {
|
|
14
|
+
|
|
15
|
+
const thumbs = [...Array(3)].map((_, i) =>
|
|
16
|
+
|
|
17
|
+
<div key={i}>
|
|
18
|
+
|
|
19
|
+
<img src={imageUrls[(mainImageIndex + i + 1) % imageUrls.length]} />
|
|
20
|
+
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
);
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
return <div className="thumbs">{thumbs}</div>;
|
|
28
|
+
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
|
|
10
32
|
|
|
11
33
|
class App extends React.Component {
|
|
12
34
|
|
|
@@ -31,8 +53,6 @@
|
|
|
31
53
|
|
|
32
54
|
|
|
33
55
|
this.onArrowClicked = this.onArrowClicked.bind(this);
|
|
34
|
-
|
|
35
|
-
this.thumbnails = this.thumbnails.bind(this);
|
|
36
56
|
|
|
37
57
|
|
|
38
58
|
|
|
@@ -76,28 +96,6 @@
|
|
|
76
96
|
|
|
77
97
|
|
|
78
98
|
|
|
79
|
-
thumbnails() {
|
|
80
|
-
|
|
81
|
-
return [...Array(3)].map((_, i) => {
|
|
82
|
-
|
|
83
|
-
const imageIndex = (this.state.mainImageIndex + i + 1) % this.imageUrls.length;
|
|
84
|
-
|
|
85
|
-
return (
|
|
86
|
-
|
|
87
|
-
<div key={i}>
|
|
88
|
-
|
|
89
|
-
<img src={this.imageUrls[imageIndex]} />
|
|
90
|
-
|
|
91
|
-
</div>
|
|
92
|
-
|
|
93
|
-
);
|
|
94
|
-
|
|
95
|
-
});
|
|
96
|
-
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
99
|
render() {
|
|
102
100
|
|
|
103
101
|
return (
|
|
@@ -114,11 +112,7 @@
|
|
|
114
112
|
|
|
115
113
|
</div>
|
|
116
114
|
|
|
117
|
-
<
|
|
115
|
+
<Thumbnails mainImageIndex={this.state.mainImageIndex} imageUrls={this.imageUrls} />
|
|
118
|
-
|
|
119
|
-
{this.thumbnails()}
|
|
120
|
-
|
|
121
|
-
</div>
|
|
122
116
|
|
|
123
117
|
</div>
|
|
124
118
|
|
|
@@ -134,6 +128,8 @@
|
|
|
134
128
|
|
|
135
129
|
|
|
136
130
|
|
|
131
|
+
|
|
132
|
+
|
|
137
133
|
```
|
|
138
134
|
|
|
139
135
|
|
|
@@ -142,7 +138,7 @@
|
|
|
142
138
|
|
|
143
139
|
|
|
144
140
|
|
|
145
|
-
[https://jsfiddle.net/jun68ykt/t
|
|
141
|
+
[https://jsfiddle.net/jun68ykt/3kt29qzc/7/](https://jsfiddle.net/jun68ykt/3kt29qzc/7/)
|
|
146
142
|
|
|
147
143
|
|
|
148
144
|
|