--- title: 'react 輪播圖 react-slick' date: 2021-08-31 14:26:00 ---  ```javascript import Slider from 'react-slick' import "~slick-carousel/slick/slick.css"; import "~slick-carousel/slick/slick-theme.css"; //輪播圖改變 const handleAfterChange = () => { const activeDom = [...document.getElementsByClassName('js-slider-main')[0].childNodes].find(item => item.className.includes('slick-active')) activeDom.scrollIntoView({behavior: "smooth", block: "nearest", inline: "center"}) } <Slider className="m-slider" dots={true} infinite={false} dotsClass="m-slider-dot-ul js-slider-main" afterChange={handleAfterChange} customPaging={(i) => { return ( <img src={imageUrlFormat(dataSource.attachment[i].filepath)} alt="圖片" /> ) }} > {dataSource.attachment.map((item) => ( <div key={item.id}> <img alt="圖片" key={item.id} src={imageUrlFormat(item.filepath)} className="m-shop-preview-slider-main-img" ></img> </div> ))} </Slider> ``` 參考鏈接：[https://react-slick.neostack.com/docs/example/custom-paging/](https://react-slick.neostack.com/docs/example/custom-paging/)