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/