Javascript 带html的滑块

我使用的是

slick carousels

项目，因为我想创建一种滑块，能够在一行中显示不同的图像

所以我想得到类似的东西：

因此，旋转木马包含一组图像，其中4个图像同时显示，而图像居中（顶部和底部的值相同）

但我使用代码得到的结果与此一模一样——真是一团糟：

$（文档）
.ready（函数（）{
$（“.carousel”）
.滑头({
centerMode：对，
中心填充：“60px”，
幻灯片放映：4，
点：错，
普雷瓦罗：错，
下一行：错，
响应：[{
断点：768，
设置：{
箭头：错，
centerMode：对，
中心填充：“40px”，
幻灯片放映：3
}
}]
});
});
.carousel{
溢出：隐藏；
}
.carousel_幻灯片{
位置：相对位置；
左缘：2%；
}
.滑滑梯{
浮动：左；
}
.滑溜初始化.滑溜{
显示：块；
}
#卡片{
位置：绝对位置；
利润率最高：10%；
背景色：暗灰色；
边界半径：16px；
宽度：90%；
身高：30%；
}
将两个幻灯片放映设置为4。您的代码中有两个。
然后在.光滑列表上设置负左边距

我不确定原因是什么，但我在
卡之后的第一个
分区中添加了类
旋转木马幻灯片
，并去掉了
style='slide'
，然后我让它开始工作。请注意，运行此代码段时，一次只能看到3项，而不是4项。这是因为在代码中，在768的断点处将项目计数设置为3。所以如果你还想要4，就改变这个数字

JSFiddle：


$（“.carousel”）
.滑头({
centerMode：对，
中心填充：“60px”，
幻灯片放映：4，
点：错，
普雷瓦罗：错，
下一行：错，
响应：[{
断点：768，
设置：{
箭头：错，
centerMode：对，
中心填充：“40px”，
幻灯片放映：3
}
}]
});
#卡{
位置：相对位置；
利润率最高：10%；
背景色：暗灰色；
边界半径：16px；
宽度：90%；
身高：30%；
}
旋转木马{
溢出：隐藏；
}
.carousel_幻灯片{
位置：相对位置；
利润率：0.15px；
}
.滑滑梯{
浮动：左；
}

你的slidesToShow属性应该是4吗？是的，只是输入错误@Observer看起来是一个很好的解决方案-非常感谢。但是，您是否愿意编辑代码，使图像居中，但不完全填满方框（使它们变小）？（就像我的问题中的形象一样）@tempi你是指这样的事情吗@那么你只想显示3个，并且在灰色框的顶部和底部添加一些填充？我只是想确保我能满足你的要求。看起来很不错，但用你的解决方案，我无法缩放（改变高度）集装箱箱。-->改变它的高度会导致图像对齐。您能帮我加上这个吗？：）@tempi您所说的“应该导致图像对齐”是什么意思。是否要更改
#卡的高度？
.slick-slide {
  position: relative;
  margin-left: 2%;
}
.slick-list{
margin-left: -2%;
}