58 lines
1.5 KiB
JavaScript
58 lines
1.5 KiB
JavaScript
import React , { useEffect, useState } from 'react';
|
|
import Slider from 'react-slick';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
const settings = {
|
|
dots: true,
|
|
infinite: false,
|
|
speed: 500,
|
|
slidesToShow: 3,
|
|
slidesToScroll: 3,
|
|
arrows: false,
|
|
adaptiveHeight: true,
|
|
};
|
|
|
|
function Contributor(props) {
|
|
const { personList } = props
|
|
const [ showList, setShowList] = useState([]);
|
|
|
|
function initList() {
|
|
if (personList.length % 3 !== 0) {
|
|
setShowList([].concat(personList, new Array(personList.length % 3 - 1).fill({})))
|
|
} else {
|
|
setShowList( personList )
|
|
}
|
|
}
|
|
|
|
useEffect(()=>{
|
|
initList();
|
|
},[personList])
|
|
|
|
return(
|
|
<div className="boxmain zone_c_lists pt40">
|
|
{
|
|
showList && showList.length > 0 ?
|
|
<Slider {...settings}>
|
|
{
|
|
showList.map((i,k)=>{
|
|
return(
|
|
<div className="container">
|
|
{ i.name &&
|
|
<div className="c_item">
|
|
<Link to={`/${i.login}`}><img src={i.imageUrl} alt="" /></Link>
|
|
<div className="c_name task-hide">{i.name}</div>
|
|
<p className="c_desc task-hide-2" style={{display:i.introduction?"":"flex"}}>{i.introduction || "暂无~"}</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</Slider>
|
|
:""
|
|
}
|
|
</div>
|
|
|
|
)
|
|
}
|
|
export default Contributor; |