以下のreact-image-galleryを下記のコードの様にして使っています。
https://www.npmjs.com/package/react-image-gallery
js
1const changeUrlToOriginal = (image_list) => { 2 return image_list.map((img) => { 3 return {original : img , thumbnail : img , sizes:100} 4 }) 5}
js
1 this.state = { 2 image_list : changeUrlToOriginal(this.data.image_list) 3 } 4 5 6
js
1<div className ={style.Image} > 2 < ImageGallery items={this.state.image_list} /> 3</div>
CSS
1:local .Image { 2 padding: 50px; 3 max-width :25%; 4 max-height: 10%; 5 margin:auto; 6 justify-content: center; 7}
ただこれだと表示したい画像の大きさが違うとき、横にスクロールしていった際に画面がガクガクと動くのが少し気になります。これの対処方法はあるでしょうか?
あなたの回答
tips
プレビュー