react 轮播图 react-slick
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/
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步