react项目轮播图插件react-slick

react-slick是一款通用的React轮播图插件(react-slick.neostack.com/)

1. 安装相应依赖

pnpm add react-slick
pnpm add slick-carousel

2. 组件内使用

import React from "react";
import Slider from "@ant-design/react-slick";
import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'

function SlickTest() {
  const imgObj = [
    'imgUrl1',
    'imgUrl2'
  ]
  const settings = {
    customPaging: function (i) {
      return (
        <a>
         {/* 生成下方的小的轮播图列表 */}
          <img src={imgObj[i]} /> 
        </a>
      );
    },
    dots: true,
    dotsClass: "slick-dots slick-thumb",
    infinite: true, // 只有一张图片的时候 设置为false 不然会默认在前后各生成一张图片
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };
  return (
    <div className="slider-container" >
      <Slider {...settings}>
        {imgObj.map(item => (
          <div>
            <img src={item} />
          </div>
        ))}
      </Slider>
    </div>
  )
}