am building react image gallery, where I’ve display all the images on the browser. I have previous and next buttons display the previous and next images if a user clicks on any of them, which is working very well.
My problem is that I want this previous or next image to be displayed below the already displayed images, not next to them.
I’ve set the CSS display property of the image element to block but it is still displayed next to the other images
below is the code
import ReactImageMagnify from ‘@blacklab/react-image-magnify’;
import galleryData from ‘…/GalleryData’;
import ‘…/App.css’;
import { useState } from ‘react’;
function Image(){
const [images, setImages] = useState(galleryData);
const [currentIndex, setCurrentIndex] = useState(0);
const goToPreviousImage = ()=>{
if (currentIndex > 0){
setCurrentIndex(currentIndex - 1)
}
};
const goToNextImage = () =>{
if(currentIndex < images.length - 1){
setCurrentIndex(currentIndex + 1)
}
}
const currentImage = images[currentIndex];
return(
<div className="App flex-container" >
<button onClick={goToPreviousImage}>Previous</button>
{
images.map((image, index) => (
<div key={image.id} className={`image-gallery-item ${index === currentIndex ? 'active' : '' }`}>
<ReactImageMagnify
activationInteractionHint='hover'
imageProps={{
src:image.url,
width: 200,
height: 200
}}
magnifiedImageProps={{
src: image.url,
width: 800,
height: 800
}}
portalProps={{
id: 'portal-test-id',
horizontalOffset: 20
}}
/>
</div>
))}
<button onClick={goToNextImage}>Next</button>
<img src={currentImage.url} className='next-img'/>
</div>
);
};
export default Image;
CSS Code
.next-img{
display: block;
width: 300px;
height: 300px;
}