jQuery Slick Slider: How to scroll less than one entire slide

Question

Using Slick Slider I'm trying to create a carousel that on the first slide it will show 75% of the slide and when scrolling it should only show 75% of the next slide.

First slide only showing 75% and then 25% of next slide

What is happening: Shows 75% of next slide but does not show 25% of previous slide

What I am trying to accomplish: Show 25% of the previous slide and 75% of current slide

My current Slick Config is:

$('.myCarousel').slick({
    arrows: false,
    infinite: false,
    slidesToShow: 0.75,
    slidesToScroll: 1,
    variableWidth: true
})

I've tried changing the slidesToScroll property to 0.75 with zero success. It seems that anything less than 1 and Slick Slider refuses to change slides.

I've also found that I can have my slider element, in this example .myCarousel, watch for the swipe event. I've thought about attempting to change the transform: translation(#px, #px, #px) on the carousel container, .myCarousel, with JS but I feel there must be an easier way.

Carousel HTML

<div class="gateway_nav">
    <div class="border_right__red">
        <div>
            <a href="" class="gateway_nav__gateway_title">ASD</a>
        </div>
        <div class="gateway_nav__slider_element">
            <a href="">ASDFG</a>
        </div>
        <div class="gateway_nav__slider_element">
            <a href="">ASDFGH</a>
        </div>
        <div class="gateway_nav__slider_element">
            <a href="">ASDFGHJKL</a>
        </div>
    </div>

    <div>
        <div>
            <a href="" class="gateway_nav__gateway_title">QWERT</a>
        </div>
        <div class="gateway_nav__slider_element">
            <a href="">QWERT</a>
        </div>
        <div class="gateway_nav__slider_element">
            <a href="">QWERTY</a>
        </div>
        <div class="gateway_nav__slider_element">
            <a href="">QWER</a>
        </div>
    </div>
</div>

Answer 1

What you can do is play with the center padding:

$('.gateway_nav').slick({
    arrows: true,
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    variableWidth: true,
    centerMode: true,
    centerPadding: '20%',
})

https://jsfiddle.net/10ftk4w2/

I don't have your CSS so I'm guessing here.