React image change with slider (Not carousel) - reactjs

Question

Good day!
I am working on a project in React where I have several images that look almost the same, but differ in some way. Here are the four images
What I want to do is to have a slider that changes the image on slide. So the image essentially gets replaced with the next one "in place" - if that makes sense. Thus, it's not a carousel, because the image is not moving, it's being replaced by another image. Here is a mock-up of what I want to do
The images are maps with locations that change each year. So I want the user to see how the locations change without the image moving.
I hope this makes sense. Are there any libraries or principles I should look at?
Thanks!

Answer 1

You question is very vague. There are many ways to achieve what you want. From the tag you used i assume that you are using React? I've created a basic example on what it could look like.
One way is to position the images on top of each other and toggle the visibility/opacity, like so:
class App extends React.Component {
state = {
imageIndex: 0,
}
setIndex = (e) => {
this.setState({imageIndex: parseInt(e.target.value)});
}
render() {
const {imageIndex} = this.state;
return (
<div>
<div className="image-wrapper">
<img style={{opacity: imageIndex === 0 ? 1 : 0}} src="https://via.placeholder.com/150/ff0"/>
<img style={{opacity: imageIndex === 1 ? 1 : 0}} src="https://via.placeholder.com/150/f00"/>
<img style={{opacity: imageIndex === 2 ? 1 : 0}} src="https://via.placeholder.com/150/f0f"/>
<img style={{opacity: imageIndex === 3 ? 1 : 0}} src="https://via.placeholder.com/150/0f0"/>
</div>
<input
type="range"
value={imageIndex}
min="0"
max="3"
onChange={this.setIndex}
/>
</div>
);
}
};
ReactDOM.render(<App/>, document.body);
img {
position: absolute;
width: 100%;
height: 100%;
transition: opacity .3s;
}
.image-wrapper {
width: 150px;
height: 150px;
position: relative;
}
input[type="range"] {
width: 150px;
}
html,
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Another way would be to render the image that is currently shown to the user, which can make animation handling a bit iffy, as unmounting needs to be delayed (in that case you should take a look at a React Animation Framework, e.g. React Transition Group) The image should be positioned with css in a way that it does not move.
I hope you can salvage something from this answer.