import React, { Component } from 'react'
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
const Slid = function () {
const arr = [1, 2, 3, 4, 5]
const settings = {
arrows: false,
className: "center",
centerMode: true,
infinite: true,
centerPadding: "0rem",
slidesToShow: 3,
speed: 500,
// autoplay:true,
speed: 500
};
return (
<Slider {...settings}>
{arr.map(items => {
return (
<div className="box1">
<div className="picture"></div>
<p>{items}</p>
</div>
)
})}
</Slider>
)
}
export default Slid
css文件：
.picture{
height: 10rem;
width: 16rem;
background: url(../img/2.jpg) no-repeat center /cover;
}
.slick-list{
margin:0 1.2rem ;
}
p{
text-align: center;
opacity: 0;
}
.center .slick-center{
position: relative;
left: -2rem;
}
.slick-slide>div{
height: 10rem;
width: 16rem;
transition: all .3s ease;
}
.center .slick-center>div{
transform: scale(1.5);
}
.slick-center p{
opacity: 1;
}
.slick-track{
padding: 3rem 0 6rem 0;
}
Video_2020-10-22_224244.gif
