我试图实现React slick 的多项目轮播。下面给出了所需的结果,
但我希望中心元素像
但我能走到这一步
我希望一次只显示三个元素,并弹出中心元素。这是我的代码。
import React, { Component } from 'react'
import Slider from "react-slick";
import DemoGuy from './DemoGuyMentors.png';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
export class Stories extends Component {
render() {
const settings = {
className: "center",
centerMode: true,
infinite: true,
slidesToShow: 4,
speed: 500,
autoplay:true,
autoplayspeed:1000
};
return (
<div>
<div className="SliderWrapper">
<Slider {...settings}>
<div className="AchiversDetails">
<div className="MentorsPicAndLogoWrapper">
<img className="MentorImg" src={DemoGuy}></img>
</div>
<div className="MentorsDetailsWordWrapper">
<h3>Lorem ipppsum</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
pellentesque metus ligula, ac elementum
velit mollis in. Praesent ut dictum diam. Vivamus gravida eros at nunc
vehicula pulvinar. Aliquam erat volutpat.
Nulla suscipit bibendum quam quis pharetra. Aliquam odio leo, molestie eu
luctus fringilla, suscipit at ipsum.
</p>
</div>
</div>
<div className="AchiversDetails">
<div className="MentorsPicAndLogoWrapper">
<img className="MentorImg" src={DemoGuy}></img>
</div>
<div className="MentorsDetailsWordWrapper">
<h3>LOREM IPPSUM</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
pellentesque metus ligula, ac elementum
velit mollis in. Praesent ut dictum diam. Vivamus gravida eros at nunc
vehicula pulvinar. Aliquam erat volutpat.
Nulla suscipit bibendum quam quis pharetra. Aliquam odio leo, molestie eu
luctus fringilla, suscipit at ipsum.
</p>
</div>
</div>
<div className="AchiversDetails">
<div className="MentorsPicAndLogoWrapper">
<img className="MentorImg" src={DemoGuy}></img>
</div>
<div className="MentorsDetailsWordWrapper">
<h3>Lorem ipppsum</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum pellentesque metus ligula, ac elementum
velit mollis in. Praesent ut dictum diam. Vivamus gravida eros at
nunc vehicula pulvinar. Aliquam erat volutpat.
Nulla suscipit bibendum quam quis pharetra. Aliquam odio leo,
molestie eu luctus fringilla, suscipit at ipsum.
</p>
</div>
</div>
<div className="AchiversDetails">
<div className="MentorsPicAndLogoWrapper">
<img className="MentorImg" src={DemoGuy}></img>
</div>
<div className="MentorsDetailsWordWrapper">
<h3>LOREM IPPSUM</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
pellentesque metus ligula, ac elementum
velit mollis in. Praesent ut dictum diam. Vivamus gravida eros at
nunc vehicula pulvinar. Aliquam erat volutpat.
Nulla suscipit bibendum quam quis pharetra. Aliquam odio leo,
molestie eu luctus fringilla, suscipit at ipsum.
</p>
</div>
</div>
<div className="AchiversDetails">
<div className="MentorsPicAndLogoWrapper">
<img className="MentorImg" src={DemoGuy}></img>
</div>
<div className="MentorsDetailsWordWrapper">
<h3>LOREM IPPSUM</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
pellentesque metus ligula, ac elementum
velit mollis in. Praesent ut dictum diam. Vivamus gravida eros at nunc
vehicula pulvinar. Aliquam erat volutpat.
Nulla suscipit bibendum quam quis pharetra. Aliquam odio leo, molestie eu
luctus fringilla, suscipit at ipsum.
</p>
</div>
</div>
</Slider>
</div>
</div>
)
}
}
export default Stories
注意:当我更改 slideToShow:3 时。只有两个元素是完全可见的,两边各有一半。以下是我使用过的 CSS
.AchiversDetails{
box-shadow: 0px 4px 52px rgba(70, 74, 140, 0.24);
padding: 3rem;
border-radius: 2%;
}
.slick-slide {
margin: 27px 27px;
}
.slick-list {
margin: 0 -27px;
}
其余的分类不包含任何 css 属性。
我可以实现盒子里面的css。但它的滑块我无法实现。