forgeplus-react/src/forge/Information/Component/projects.jsx

import React , { useEffect, useRef, useState } from 'react';
import Slider from 'react-slick';
import projectRight from '../img/projectRight.png';
import projectLeft from '../img/projectLeft.png';

function SampleNextArrow(props) {
  const { className, activeSlide, total , onClick } = props;
  return (
    activeSlide !== (total - 3) && <img src={projectRight} className={`right_arraw ${className}`} onClick={onClick}></img>
  );
}

function SamplePrevArrow(props) {
  const { className, activeSlide, total , onClick } = props;
  return (
    activeSlide !== 0 && <img src={projectLeft} className={`left_arraw ${className}`} onClick={onClick}></img>
  );
}

function Projects(props) {
  const { projectList } = props;
  const sliderRef = useRef(null)
  const [ activeSlide , setActiveSlide ] = useState(undefined);

  const settings = {
    className: "center",
    centerMode: true,
    infinite: false,
    centerPadding: "100px",
    slidesToShow: 3,
    speed: 500,
    nextArrow: <SampleNextArrow className="right_arraw" activeSlide={ activeSlide } total={ projectList.length }/>,
    prevArrow: <SamplePrevArrow className="left_arraw" activeSlide={ activeSlide } total={ projectList.length }/>,
    afterChange: current => { setActiveSlide(current) }
  };
  

  useEffect(()=>{
    if(sliderRef && projectList && projectList.length > 2){
      sliderRef.current.slickNext()
    }
  },[sliderRef])


  return(
    <div className={`boxmain ${ projectList.length !== 3 && 'not_three_project' } ${ projectList.length < 3 && 'less_three_project' }`}>
      {
        projectList && projectList.length > 0 ?
          (projectList.length < 3 ? 
            projectList.map((i,k)=>{
              return(
                <div className="container" key={ k }>
                  <div className="zone_p_item">
                    {i.projectProperties && i.projectProperties.authorImageUrl && <img className="info_img" src={i.projectProperties.authorImageUrl} alt="" /> }
                    <p className="z_p_title task-hide" onClick={()=>window.open(i.projectURL)}>{i.projectProperties && i.projectProperties.name}</p>
                    <p className="z_p_desc task-hide-2">{i.projectProperties && i.projectProperties.description ? i.projectProperties.description : "暂无~"}</p>
                  </div>
                </div>
              )
            })
            :
            <Slider ref={sliderRef} {...settings}>
              {
                projectList.map((i,k)=>{
                  return(
                    <div className="container" key={ k }>
                      <div className="zone_p_item">
                        {i.projectProperties && i.projectProperties.authorImageUrl && <img className="info_img" src={i.projectProperties.authorImageUrl} alt="" /> }
                        <p className="z_p_title task-hide" onClick={()=>window.open(i.projectURL)}>{i.projectProperties && i.projectProperties.name}</p>
                        <p className="z_p_desc task-hide-2">{i.projectProperties && i.projectProperties.description ? i.projectProperties.description : "暂无~"}</p>
                      </div>
                    </div>
                  )
                })
              }
            </Slider>
          )
        :""
      }
    </div>
  )
}
export default Projects;