jQuery Slick轮播：如何滚动不到一个完整的幻灯片

Question

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

第一张幻灯片仅显示75％，然后显示下一张幻灯片的25％

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

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

我的当前Slick配置是：

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

我尝试将slidesToScroll属性更改为0.75，但没有成功。似乎任何小于1的值Slick 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>

- Brandon Benefield

---

你有相关的HTML代码吗？ - Keith

@Keith 感谢您的建议，我已经将 HTML 添加到末尾。 - Brandon Benefield

Answer 1

您可以尝试调整中心填充(padding)来达到效果：

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

我没有你的CSS，所以只能猜测。

https://jsfiddle.net/10ftk4w2/

- Keith