javascript - jQuery 光滑 slider : How to scroll less than one entire slide

Question

使用 Slick Slider我正在尝试创建一个轮播，在第一张幻灯片上它将显示幻灯片的 75%，而在滚动时它应该只显示下一张幻灯片的 75%。

第一张幻灯片只显示 75%，然后是下一张幻灯片的 25%

发生了什么:显示下一张幻灯片的 75%，但不显示上一张幻灯片的 25%

我要实现的目标:显示上一张幻灯片的 25% 和当前幻灯片的 75%

我当前的 Slick Config 是:

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

我已尝试将 slidesToScroll 属性更改为 0.75，但成功率为零。似乎小于 1 和 Slick Slider 的任何内容都拒绝更改幻灯片。

我还发现我可以让我的 slider 元素(在此示例中为 .myCarousel)监视 swipe 事件。我考虑过尝试使用 JS 更改旋转木马容器 .myCarousel 上的 transform: translation(#px, #px, #px)，但我觉得在那里一定是更简单的方法。

轮播 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

你可以做的是使用中心填充:

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

https://jsfiddle.net/10ftk4w2/

我没有你的 CSS，所以我在这里猜测。