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/