回答編集履歴
5
テキスト追加
answer
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
こんにちは。
|
|
2
2
|
|
|
3
3
|
いろいろなやり方があると思いますので、あくまで一例として、以下のような感じでいかがでしょうか？
|
|
4
|
-
（※矢印に
|
|
4
|
+
（※矢印に[Font Awesome](https://fontawesome.com/) を、ダミーの画像に [dummyimage](https://dummyimage.com/) を使用しています。）
|
|
5
5
|
|
|
6
6
|
```javascript
|
|
7
7
|
|
4
テキスト修正
answer
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
```javascript
|
|
7
7
|
|
|
8
8
|
const Thumbnails = ({mainImageIndex, imageUrls}) => {
|
|
9
|
-
const thumbs = [...Array(
|
|
9
|
+
const thumbs = [...Array(imageUrls.length-1)].map((_, i) =>
|
|
10
10
|
<div key={i}>
|
|
11
11
|
<img src={imageUrls[(mainImageIndex + i + 1) % imageUrls.length]} />
|
|
12
12
|
</div>
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
|
|
70
70
|
以下は、上記のコードのデモです。
|
|
71
71
|
|
|
72
|
-
[https://jsfiddle.net/jun68ykt/3kt29qzc/
|
|
72
|
+
[https://jsfiddle.net/jun68ykt/3kt29qzc/8/](https://jsfiddle.net/jun68ykt/3kt29qzc/8/)
|
|
73
73
|
|
|
74
74
|
|
|
75
75
|
参考になれば幸いです。
|
3
テキスト追加
answer
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
こんにちは。
|
|
2
2
|
|
|
3
3
|
いろいろなやり方があると思いますので、あくまで一例として、以下のような感じでいかがでしょうか？
|
|
4
|
+
（※矢印に、[Font Awesome](https://fontawesome.com/) を使用しています。）
|
|
4
5
|
|
|
5
6
|
```javascript
|
|
6
7
|
|
2
テキスト修正
answer
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
const Thumbnails = ({mainImageIndex, imageUrls}) => {
|
|
8
8
|
const thumbs = [...Array(3)].map((_, i) =>
|
|
9
|
-
|
|
9
|
+
<div key={i}>
|
|
10
10
|
<img src={imageUrls[(mainImageIndex + i + 1) % imageUrls.length]} />
|
|
11
11
|
</div>
|
|
12
12
|
);
|
1
テキスト修正
answer
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
いろいろなやり方があると思いますので、あくまで一例として、以下のような感じでいかがでしょうか？
|
|
4
4
|
|
|
5
5
|
```javascript
|
|
6
|
+
|
|
7
|
+
const Thumbnails = ({mainImageIndex, imageUrls}) => {
|
|
8
|
+
const thumbs = [...Array(3)].map((_, i) =>
|
|
9
|
+
<div key={i}>
|
|
10
|
+
<img src={imageUrls[(mainImageIndex + i + 1) % imageUrls.length]} />
|
|
11
|
+
</div>
|
|
12
|
+
);
|
|
13
|
+
|
|
14
|
+
return <div className="thumbs">{thumbs}</div>;
|
|
15
|
+
};
|
|
16
|
+
|
|
6
17
|
class App extends React.Component {
|
|
7
18
|
constructor(props) {
|
|
8
19
|
super(props);
|
|
@@ -15,7 +26,6 @@
|
|
|
15
26
|
];
|
|
16
27
|
|
|
17
28
|
this.onArrowClicked = this.onArrowClicked.bind(this);
|
|
18
|
-
this.thumbnails = this.thumbnails.bind(this);
|
|
19
29
|
|
|
20
30
|
this.state = {
|
|
21
31
|
mainImageIndex: 0
|
|
@@ -37,17 +47,6 @@
|
|
|
37
47
|
};
|
|
38
48
|
}
|
|
39
49
|
|
|
40
|
-
thumbnails() {
|
|
41
|
-
return [...Array(3)].map((_, i) => {
|
|
42
|
-
const imageIndex = (this.state.mainImageIndex + i + 1) % this.imageUrls.length;
|
|
43
|
-
return (
|
|
44
|
-
<div key={i}>
|
|
45
|
-
<img src={this.imageUrls[imageIndex]} />
|
|
46
|
-
</div>
|
|
47
|
-
);
|
|
48
|
-
});
|
|
49
|
-
}
|
|
50
|
-
|
|
51
50
|
render() {
|
|
52
51
|
return (
|
|
53
52
|
<div className="app">
|
|
@@ -56,9 +55,7 @@
|
|
|
56
55
|
<div><img src={this.imageUrls[this.state.mainImageIndex]}/></div>
|
|
57
56
|
<div onClick={this.onArrowClicked('next')}><i className="fas fa-arrow-right fa-4x"></i></div>
|
|
58
57
|
</div>
|
|
59
|
-
<
|
|
58
|
+
<Thumbnails mainImageIndex={this.state.mainImageIndex} imageUrls={this.imageUrls} />
|
|
60
|
-
{this.thumbnails()}
|
|
61
|
-
</div>
|
|
62
59
|
</div>
|
|
63
60
|
);
|
|
64
61
|
}
|
|
@@ -66,11 +63,12 @@
|
|
|
66
63
|
|
|
67
64
|
ReactDOM.render(<App />, document.querySelector("#app"))
|
|
68
65
|
|
|
66
|
+
|
|
69
67
|
```
|
|
70
68
|
|
|
71
69
|
以下は、上記のコードのデモです。
|
|
72
70
|
|
|
73
|
-
[https://jsfiddle.net/jun68ykt/
|
|
71
|
+
[https://jsfiddle.net/jun68ykt/3kt29qzc/7/](https://jsfiddle.net/jun68ykt/3kt29qzc/7/)
|
|
74
72
|
|
|
75
73
|
|
|
76
74
|
参考になれば幸いです。
|