React-slick: centerMode doesn't work

[giladbr]

Hello,

Thank you so much for this component, it is totally awesome.
However, I'm trying to use centerMode=true to enlarge the centered "slide", but for some reason it doesn't work - I'm getting something like this:

It seems the center slide is being assigned the slick-center css lass but then something fails, also the widths are messed up by this.

My code is as following:

 const mobilePageSlickSettings = {
            //infinite: false,
            centerMode: true, // - (Gilad, 20.2.17) - we wanted it but it doesn't work for some reason...
            draggable: true,
            speed: 500,
            slidesToShow: 3, //changes on responsive
            slidesToScroll: 1,
            responsive: [{breakpoint: 500, settings: {autoplay: true, slidesToShow: 1}}],
            dots: true,
            nextArrow: <NextArrow/>,
            prevArrow: <PrevArrow/>,
        };
        return (
                <div className="mobileSlickWrapper">
                    <ReactSlick {...mobilePageSlickSettings} >
                        <div className="carPhone">
                            <img src="/assets/images/staticPages/mobile_home.png?v="/>
                            <h2>{texts.mobileTitle1}</h2>
                            <h3>{texts.mobileSubTitle1}</h3>
                        </div>
                        <div>
                            <img src="/assets/images/staticPages/mobile_results.png?v="/>
                            <h2>{texts.mobileTitle2}</h2>
                            <h3>{texts.mobileSubTitle2}</h3>
                        </div>
                        <div>
                            <img src="/assets/images/staticPages/mobile_results.png?v="/>
                            <h2>{texts.mobileTitle3}</h2>
                            <h3>{texts.mobileSubTitle3}</h3>
                        </div>
                          <div>
                            <img src="/assets/images/staticPages/mobile_image.png?v="/>
                            <h2>{texts.mobileTitle4}</h2>
                            <h3>{texts.mobileSubTitle4}</h3>
                        </div>
                          <div>
                            <img src="/assets/images/staticPages/mobile_results.png?v="/>
                            <h2>{texts.mobileTitle5}</h2>
                            <h3>{texts.mobileSubTitle5}</h3>
                        </div>
                </ReactSlick>

Any ideas?

Thanks

[giladbr]

Ok my dear friend help me solve this - for anyone who might be struggling with this issue, please note that in order for centerMode to work properly (like in the demo), you need to:

1. In the settings object, set centerPadding: 0 (otherwise the slides will overlap each other)
2. Using centerMode: true only adds slick-center CSS class to the centered slide. For it to be nicely zoomed like in the demo, you need to add the following CSS:

.slick-slide.slick-center img {
        transform: scale(1.1);
    }

Or of course any other CSS you want to apply to the centered slide.

[vickingbg]

Thanks for the idea. I also add this CSS to be rendered into the center :

.slick-slide.slick-center img { margin-left: auto; margin-right: auto; }