使用 Slick Slider我正在尝试创建一个轮播,在第一张幻灯片上它将显示幻灯片的 75%,而在滚动时它应该只显示下一张幻灯片的 75%。
发生了什么:显示下一张幻灯片的 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>
最佳答案
你可以做的是使用中心填充:
$('.gateway_nav').slick({
arrows: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true,
centerMode: true,
centerPadding: '20%',
})
https://jsfiddle.net/10ftk4w2/
我没有你的 CSS,所以我在这里猜测。
关于javascript - jQuery 光滑 slider : How to scroll less than one entire slide,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57662746/