Jquery 如何在滑块上创建此效果？

我已经能够使用jQuerySlick创建一个4图像滑块。这是我的代码：

$（函数（）{
$（'.slider'）。光滑({
无限：错，
速度:500,，
幻灯片放映：4，
幻灯片滚动：4
});
});
/*Slick库的默认CSS*/
.光滑滑块{
位置：相对位置；
显示：块；
框大小：边框框；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
-ms触摸动作：泛y；
触摸动作：泛y；
-webkit点击突出显示颜色：透明；
.产品项目信息{
显示：内联块；
宽度：24%；
}
}
.花里胡哨的名单{
位置：相对位置；
溢出：隐藏；
显示：块；
保证金：0；
填充：0；
&：焦点{
大纲：无；
}
&.拖{
光标：指针；
光标：手；
}
}
.光滑的滑块.光滑的轨迹，
.光滑的滑块.光滑的列表{
-webkit转换：translate3d（0,0,0）；
-moz变换：translate3d（0,0,0）；
-ms变换：translate3d（0,0,0）；
-o变换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}
.光滑的轨道{
位置：相对位置；
左：0；
排名：0；
显示：块；
&：之前，
&：之后{
内容：“；
显示：表格；
}
&：之后{
明确：两者皆有；
}
.光滑装载和{
可见性：隐藏；
}
}
.滑滑梯{
浮动：左；
身高：100%；
最小高度：1px；
[dir=“rtl”]和{
浮动：对；
}
img{
显示：块；
}
图片{
高度：300px；
}
&.平滑加载img{
显示：无；
}
显示：无；
&.拖动img{
指针事件：无；
}
.slick初始化&{
显示：块；
}
.光滑装载和{
可见性：隐藏；
}
.光滑的垂直和{
显示：块；
高度：自动；
边框：1px实心透明；
}
}
.光滑的箭头，光滑的隐藏{
显示：无；
}
这可能会对您有所帮助。也许这不是一个完美的解决方案，因为我认为它需要一些其他的调整，但它是有效的


$（函数（）{
$（'.slider'）。光滑({
无限：错，
速度:500,，
幻灯片放映：4，
幻灯片滚动：4
});
});
/*Slick库的默认CSS*/
.光滑滑块{
位置：相对位置；
显示：块；
框大小：边框框；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
-ms触摸动作：泛y；
触摸动作：泛y；
-webkit点击突出显示颜色：透明；
.产品项目信息{
显示：内联块；
宽度：24%；
}
}
.花里胡哨的名单{
位置：相对位置；
溢出：隐藏；
显示：块；
保证金：0；
填充：0；
&：焦点{
大纲：无；
}
&.拖{
光标：指针；
光标：手；
}
}
.光滑的滑块.光滑的轨迹，
.光滑的滑块.光滑的列表{
-webkit转换：translate3d（0,0,0）；
-moz变换：translate3d（0,0,0）；
-ms变换：translate3d（0,0,0）；
-o变换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}
.光滑的轨道{
位置：相对位置；
左：0；
排名：0；
显示：块；
&：之前，
&：之后{
内容：“；
显示：表格；
}
&：之后{
明确：两者皆有；
}
.光滑装载和{
可见性：隐藏；
}
}
.滑滑梯{
浮动：左；
身高：100%；
最小高度：1px；
[dir=“rtl”]和{
浮动：对；
}
img{
显示：块；
}
图片{
高度：300px；
}
&.平滑加载img{
显示：无；
}
显示：无；
&.拖动img{
指针事件：无；
}
.slick初始化&{
显示：块；
}
.光滑装载和{
可见性：隐藏；
}
.光滑的垂直和{
显示：块；
高度：自动；
边框：1px实心透明；
}
}
.光滑的箭头，光滑的隐藏{
显示：无；
}
.滑滑梯{
变换：旋转（-10度）比例（1.15,1.15）！重要；
边际：0.13px；
溢出：隐藏；
}
.滑溜式img{
变换：旋转（10度）比例（1.22,1.22）！重要；
}

使用svg多边形（工作示例）：


$（函数（）{
$（'.slider'）。光滑({
无限：是的，
速度:500,，
幻灯片放映：4，
幻灯片滚动：1
});
});
。光滑的幻灯片{
大纲：无；
}
.滑头{
左：20px！重要；
z指数：9999；
}
.下一个{
右：20px！重要；
z指数：9999；
}
.svg滑块{
笔画宽度：0；
}