我想要的是有一个滑块,显示3.5幻灯片一次,与最右边的幻灯片是一个只有一半显示。我已经看到这样做成功使用centerMode和centerPadding与光滑滑块,但我不希望幻灯片居中。换句话说,我希望最左边的幻灯片与窗口的侧面齐平,完全在视图中,但最右边的幻灯片是一半在窗口中,一半关闭。这是可能的slick?我见过的人使用slidesToShow:3.5,但这使得最左边的幻灯片去一半的屏幕,我需要它的权利。
enxuqcxy1#
无需添加“slidesToShow:3.5选项”打电话给滑头
$('.Your-container').slick({ arrows: false, });
字符串添加以下CSS:
.slick-list{padding:0 20% 0 0 !important;}
型您可以给予一个固定的填充到右边或百分比。
0dxa2lsx2#
你可以像这样做slidesToShow: 3.5,使infinite: false。最右边的幻灯片将显示一半。
slidesToShow: 3.5
infinite: false
kx1ctssn3#
你也可以在slick中通过在slick init中添加这两个参数来实现这一点:
centerMode: true, centerPadding: '20%',
字符串这相当于
.slick-list{padding:0 20% 0 0;}
型
2nbm6dog4#
请注意使用slidesToShow与小数位。根据Official Documentation,slidesToShow的类型是int而不是float。将其用作浮点数会导致breakpoint事件发生不可预测的异常(当您指定了自定义断点选项时)。你可以在官方的Slick GitHub线程here,here中阅读更多关于这些问题的信息。
slidesToShow
int
float
breakpoint
qacovj5a5#
可能需要在CSS中添加重要内容。下面是我的JS代码:
$(this).slick({ slidesToShow: 1, slidesToScroll: 1, adaptiveHeight: true, infinite: true, arrows: true, dots: false, centerMode: true, })
字符串下面是CSS代码:
.slick-list { padding:0 20% 0 0 !important; }
w1e3prcc6#
我的用例有点不同,因为我想显示上一张和下一张幻灯片的部分内容,* 以及 * 当前幻灯片和这些幻灯片之间的箭头。到目前为止,我的工作是添加这些样式:
.slick-list { /* Show slides that would otherwise be hidden off-screen */ overflow: visible; } .slick-slide:not(.slick-current) { /* Make slides other than the current one translucent */ opacity: 0.4; }
字符串这是一个正在进行的工作,但这是我能找到的唯一方法来显示前一张和下一张幻灯片。可能值得注意的是,设置lazyLoad: "ondemand"与这种方法不兼容,因为预览幻灯片的内容只有在它们位于中心时才会加载。
lazyLoad: "ondemand"
6条答案
按热度按时间enxuqcxy1#
无需添加“slidesToShow:3.5选项”
打电话给滑头
字符串
添加以下CSS:
型
您可以给予一个固定的填充到右边或百分比。
0dxa2lsx2#
你可以像这样做
slidesToShow: 3.5
,使infinite: false
。最右边的幻灯片将显示一半。kx1ctssn3#
你也可以在slick中通过在slick init中添加这两个参数来实现这一点:
字符串
这相当于
型
2nbm6dog4#
请注意使用
slidesToShow
与小数位。根据Official Documentation,
slidesToShow
的类型是int
而不是float
。将其用作浮点数会导致breakpoint
事件发生不可预测的异常(当您指定了自定义断点选项时)。你可以在官方的Slick GitHub线程here,here中阅读更多关于这些问题的信息。
qacovj5a5#
可能需要在CSS中添加重要内容。
下面是我的JS代码:
字符串
下面是CSS代码:
型
w1e3prcc6#
我的用例有点不同,因为我想显示上一张和下一张幻灯片的部分内容,* 以及 * 当前幻灯片和这些幻灯片之间的箭头。
到目前为止,我的工作是添加这些样式:
字符串
这是一个正在进行的工作,但这是我能找到的唯一方法来显示前一张和下一张幻灯片。
可能值得注意的是,设置
lazyLoad: "ondemand"
与这种方法不兼容,因为预览幻灯片的内容只有在它们位于中心时才会加载。