jquery 在Slick Slider中显示下一张幻灯片的一半,但不显示居中模式

zlwx9yxi  于 2023-11-17  发布在  jQuery
关注(0)|答案(6)|浏览(201)

我想要的是有一个滑块,显示3.5幻灯片一次,与最右边的幻灯片是一个只有一半显示。我已经看到这样做成功使用centerMode和centerPadding与光滑滑块,但我不希望幻灯片居中。换句话说,我希望最左边的幻灯片与窗口的侧面齐平,完全在视图中,但最右边的幻灯片是一半在窗口中,一半关闭。这是可能的slick?我见过的人使用slidesToShow:3.5,但这使得最左边的幻灯片去一半的屏幕,我需要它的权利。

enxuqcxy

enxuqcxy1#

无需添加“slidesToShow:3.5选项”
打电话给滑头

$('.Your-container').slick({
    arrows: false,
});

字符串
添加以下CSS:

.slick-list{padding:0 20% 0 0 !important;}


您可以给予一个固定的填充到右边或百分比。

0dxa2lsx

0dxa2lsx2#

你可以像这样做slidesToShow: 3.5,使infinite: false。最右边的幻灯片将显示一半。

kx1ctssn

kx1ctssn3#

你也可以在slick中通过在slick init中添加这两个参数来实现这一点:

centerMode: true,
centerPadding: '20%',

字符串
这相当于

.slick-list{padding:0 20% 0 0;}

2nbm6dog

2nbm6dog4#

请注意使用slidesToShow与小数位。
根据Official DocumentationslidesToShow的类型是int而不是float。将其用作浮点数会导致breakpoint事件发生不可预测的异常(当您指定了自定义断点选项时)。
你可以在官方的Slick GitHub线程herehere中阅读更多关于这些问题的信息。

qacovj5a

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;
}

w1e3prcc

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"与这种方法不兼容,因为预览幻灯片的内容只有在它们位于中心时才会加载。

相关问题