0
261
ViewsWhy my image slider only show the first image instead of all 3 images?
I want to make an image slider in my application using the 'react-simple-image-slider ' package. But it only show the first image only..
In my firestore, my imageUrl is stored like this:
In the documentation of the package, it shows that the 'images' should be stored in this format:
The website of this package: https://www.npmjs.com/package/react-simple-image-slider
Then, in my application, I have fetched the data and store the imageUrl into the 'image' and pass it into 'SimpleImageSlider' to use it.
const ProductPage = ({ collection, match }) => {
const { items } = collection;
const image = [{url: items[match.params.itemId - 1].imageUrl}];
console.log(image);
return (
<div className='collection-page'>
<SimpleImageSlider
width={500}
height={500}
images={image}
showBullets={true}
showNavs={true}
/>
<div className='items'>
{items[match.params.itemId - 1].name}
</div>
</div>
)
};
However, the application only show the first image in the slider:
I have console.log(image) and I thought I already store the 3 imageURL into the array, but I have no idea why it only displays the first one? Is it something wrong on the method I store the 'image' and how can I convert it to fit the structure that the documentation need from the data I fetched from database?
2 answers
Answer question0
Your array is of format url: [], when the docs say each object in the array should be of format { url: "" }. So, ensure your array looks like this:
[
{ url: "https://..." },
{ url: "https://..." },
{ url: "https://..." },
]
0
This should work as it will assign an object to each item
const ProductPage = ({ collection, match }) => {
let { items } = collection;
let image = []
useEffect(()=>{
items.map(item=>image.push({url: item.imageUrl}))
},[])
console.log(image);
return (
<div className='collection-page'>
{image.length && <SimpleImageSlider
width={500}
height={500}
images={image}
showBullets={true}
showNavs={true}
/>
}
<div className='items'>
{items[match.params.itemId - 1].name}
</div>
</div>
)
};