Unable to get desired result from react slick - css

Question

I was trying to implement React slick's multiple items carousel. The desired result is given below
but I want the center element to pop out a little just like
But I'm able to get this far
I want only three elements visible at a time and center element to be popped out. Here is my code.
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
Note: When I change the slideToShow:3. Only two elements are entirely visible and a half on both sides.
Following is the CSS I have used
.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;
}
Rest of the classed doesn't hold any css properties.
The desired final output is
I can implement the css which is inside the box. But its the slider I'm unable to implement.

Answer 1

centerMode does not work correctly unless you use an odd value for the slidesToShow setting. You should be able to tweak the padding between slides with the centerPadding option instead of your slick-slide and slick-list CSS.
const settings = {
className: "center",
centerMode: true,
centerPadding: '60px',
infinite: true,
slidesToShow: 3,
speed: 500,
autoplay:true,
autoplayspeed:1000
};
To get your center slide to be larger than the others, you can target it with CSS and scale it up:
.slick-center .AchiversDetails {
transform: scale(1.2);
}