Slick slider one main slide then have 25% of the prev & next slide showing like in the image below

Question

I want my slider to look like this

I am using slick: Link to slick slider

I have taken the images and captions out while i get it working, so far i have got it to look like this, but see no way of getting to my desired outcome. Ive searched for a couple of hours now and not found anything that really helps me so any help would be amazing.

Below is what my slider currently looks like:

Here is my HTML code:

<div class="about-slideshow">
    <div class="slick-container">
        <div class="a-slick-wrap">
            <div class="slide">Slide 1</div>
            <div class="slide">Slide 2</div>
            <div class="slide">Slide 3</div>
            <div class="slide">Slide 4</div>
            <div class="slide">Slide 5</div>
            <div class="slide">Slide 6</div>
        </div>
    </div>
</div>

Here is my CSS code:

.about-slideshow {
    .slick-container{
        width: 100%;
        margin: 0 auto;
      }
    .a-slick-wrap{
        margin: 0 -10px;
        .slide {
            height: 480px;
            background: red;
            position: relative;
            border-radius: 16px;
            padding: 0 25px;
            
        } 
    }
}

Here is my Jquery code:

$('.a-slick-wrap').slick({
    dots: true,
    arrows: true,
    focusOnSelect: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    slidesToScroll: 1,
    centerMode: true,
    centerPadding: '30px',
});

My slider does work I just need the (current) red slides to look the same as the original prototype.

Answer 1

You are looking for the centerPadding property in the slick settings, play around with it until you get closer to the design.

Here's an example:

$('.a-slick-wrap').slick({
    dots: true,
    arrows: true,
    speed: 300,
    slidesToShow: 1,
    slidesToScroll: 1,
    centerMode: true,
    centerPadding: "25%",
});

.a-slick-wrap .slide {
 height: 480px;
 background: red;
 border-radius: 16px;
 display: inline-block;
} 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<div class="about-slideshow">
    <div class="slick-container">
        <div class="a-slick-wrap">
            <div class="slide">Slide 1</div>
            <div class="slide">Slide 2</div>
            <div class="slide">Slide 3</div>
            <div class="slide">Slide 4</div>
            <div class="slide">Slide 5</div>
            <div class="slide">Slide 6</div>
        </div>
    </div>
</div>