1 | # Thumbs not visible
|
2 |
|
3 | ### Error message:
|
4 | > No images found! Can't build the thumb list without images. If you don't need thumbs, set showThumbs={false} in the Carousel. Note that it's not possible to get images rendered inside custom components.
|
5 |
|
6 | Carousel will find the thumbs if they are rendered as direct children of the carousel or if they are inside a div or another normal html element in a way that it's possible to access the children of these elements from the carousel.
|
7 |
|
8 | For performance reasons, it's not possible to get images inside custom components.
|
9 |
|
10 | Good:
|
11 | ```javascript
|
12 | <Carousel showArrows={true} showThumbs={true}>
|
13 | {
|
14 | images.map((url, index) => (
|
15 | <div key={index}>
|
16 | <img src={url} />
|
17 | <p>Legend</p>
|
18 | </div>
|
19 | ))
|
20 | }
|
21 | </Carousel>
|
22 | ```
|
23 |
|
24 | Good:
|
25 | ```javascript
|
26 | <Carousel showArrows={true} showThumbs={true}>
|
27 | {
|
28 | images.map((url, index) => (
|
29 | <img key={index} src={url} />
|
30 | ))
|
31 | }
|
32 | </Carousel>
|
33 | ```
|
34 |
|
35 | Bad:
|
36 | ```javascript
|
37 | const ImgSlider = ({ url }) => (
|
38 | <div>
|
39 | <img src={url} />
|
40 | </div>
|
41 | );
|
42 |
|
43 | <Carousel showArrows={true} showThumbs={true}>
|
44 | {
|
45 | images.map((url, index) => <ImgSlider key={index} url={url}/>)
|
46 | }
|
47 | </Carousel>
|
48 | ```
|