full width carousel slider with previous next partial images

Question

Im trying to create a slider that has the main image about 60% of the screen and then 20% of the previous and next image next to it. Here is an example http://www.qantumthemes.xyz/onair2/wpdemo/

Im trying to use slick slider and the example here https://kenwheeler.github.io/slick/ under Slider Syncing where it has the option centerMode. The problem is that I can't seem to find a way to set the width of the previous and next images.

Here is the code I have so far with slick slider

.slider {
width: 50%;
margin: 100px auto;
}

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

<section class="center slider">
<div>
<img src="1.jpg">
</div>
<div>
<img src="2.jpg">
</div>
<div>
<img src="3.jpg">
</div>
<div>
<img src="4.jpg">
</div>
</section>

Answer 1

I created this fiddle, which works they way you're asking https://jsfiddle.net/uqy8L69g/ .

Main fix was to initialize variableWidth to true and set width for the slides:

 .slick-slide {
    width: 2em;
 }

 .slick-active {
    width: 5.5em;
    border: .1em solid black;
 }

The problem is the weird move it does while changing slides. This happens because of centerMode. It implements padding only after the sliding was done. To fix that, I would play with transitions using onAfterChange (you can read about it here: https://github.com/kenwheeler/slick/issues/1005 ).