input[type=range]
を使えばシークバーっぽのを実装できそうな気がします。
<input type="range"> - HTML: HyperText Markup Language | MDN
class App extends React.Component {
state = {
index: 0,
imageList: [...Array(5)].map((v, i) => ({
src: `https://dummyimage.com/150x150/000/fff&text=${i}`
}))
};
_handleChange = (e) => {
const index = e.target.value;
this.setState({ index });
};
render() {
const { src } = this.state.imageList[this.state.index];
return (
<div>
<img
crossOrigin="Anonymous"
src={src}
/>
<h1>Hello.</h1>
<input
type="range"
min={1}
max={this.state.imageList.length}
onChange={this._handleChange}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.querySelector("#app"))
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。