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

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

function SampleNextArrow(props) {
  const { className, style, onClick } = props;
  return (
    <img src={projectRight} className={`right_arraw ${className}`} onClick={onClick}></img>
  );
}

function SamplePrevArrow(props) {
  const { className, style, onClick } = props;
  return (
    <img src={projectLeft} className={`left_arraw ${className}`} onClick={onClick}></img>
  );
}

const settings = {
  className: "center",
  centerMode: true,
  infinite: true,
  centerPadding: "100px",
  slidesToShow: 3,
  speed: 500,
  nextArrow: <SampleNextArrow className="right_arraw"/>,
  prevArrow: <SamplePrevArrow className="left_arraw"/>
};


function Projects(props) {
  const { projectList } = props;
  const sliderRef = useRef(null)

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


  return(
    <div className="boxmain">
      {
        projectList && projectList.length > 0 ?
          <Slider ref={sliderRef} {...settings}>
            {
              projectList.map((i,k)=>{
                return(
                  <div className="container">
                    <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;