jQuery Slick Slider：如何滚动少于一整张幻灯片

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 的任何内容都拒绝更改幻灯片。

我还发现我可以拥有我的滑块元素，在此示例中 .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 所以我在这里猜测。

jQuery Slick Slider：如何滚动少于一整张幻灯片

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

javascript

jquery

slick.js