react 轮播图 react-slick

最新推荐文章于 2025-02-25 23:06:00 发布

徐同保

最新推荐文章于 2025-02-25 23:06:00 发布

阅读量1k

点赞数

分类专栏： web前端文章标签： css react.js html

本文链接：https://blog.csdn.net/xutongbao/article/details/120016980

版权

web前端专栏收录该内容

735 篇文章

订阅专栏

这篇博客介绍了如何利用React Slick库创建一个带有平滑滚动功能的轮播图组件，并展示了如何实现自定义分页指示器。通过设置`afterChange`回调函数，确保每次切换幻灯片时，当前活动的幻灯片都会平滑滚动到视口中央。同时，博客中还给出了具体的代码示例，包括图片路径的处理和轮播图项的遍历渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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/