我的网站上有一个显示篮球队赛程的滚动条,滚动条包含了本赛季所有比赛的日期顺序。
我希望下一个游戏的滑条居中。我如何将一个特定的幻灯片设置为第一张幻灯片,即使它不是html中的第一张。
代码:
$('.result_slider').slick({
rtl: true,
centerPadding: '0px',
slidesToShow: 6,
responsive: [
{
breakpoint: 1680,
settings: {
arrows: false,
centerPadding: '0px',
slidesToShow: 3
}
},
{
breakpoint: 481,
settings: {
arrows: false,
centerPadding: '0px',
slidesToShow: 1
}
}
]
});
5条答案
按热度按时间v2g6jxz61#
您可以使用
initialSlide
来完成此操作。请注意,第一张幻灯片的编号为0,因此如果您希望滑块从第二张幻灯片开始,则应设置initialSlide: 1
。这是我的minimal example,滑块从第三张幻灯片开始。
uinbv5nw2#
如果在PHP或JavaScript变量中指定游戏日期,则可以将它们与当前日期进行比较,并将该变量放在“initialSlide”调用中。
下面的例子是基于一周中的一天,但概念仍然是相同的。我有一个客户谁有特价在他们的酒吧每周6天周一至周六。所以与下面的脚本,它会使当前一周中的一天“中心”。
您还可以匹配日期而不是一周中的哪一天。
下面是一个使用PHP的示例。
cl25kdpy3#
您可以使用内置方法。
d5vmydt94#
根据Slick.js版本,设置
initialSlide
选项可能会导致问题。尝试以下内容:
selectedIndex
变量,并设置为所需幻灯片的索引(而不是数字)。vsnjm48y5#