Javascript 移动视图图像上的滑块未显示

这是我从codepen获得的滑块代码，我对它做了一些小的更改，但在代码更改前后，这个滑块没有在任何移动视图上显示/加载图像，我不知道如何解决它。。 请帮忙

我的代码笔链接

一些CSS链接

一些JS链接

jQuery（函数（$）{
$（'.flickfeed'）。在（'init'，function（）上{
var currentfirst=$（this.find（'.slick active'）.first（）；
$（currentfirst）.addClass（'firster'）；
//console.log（'thishere'）；
var currentlast=$（this.find（'.slick active'）.last（）；
$（currentlast）.addClass（'laster'）；
});   
函数getSliderSettings（）{
返回{
点：错，
无限：是的，
速度:300,，
自动播放：对，
幻灯片放映：6.17，
幻灯片滚动：2，
响应：[
{
断点：1024，
设置：{
幻灯片放映：2.25，
幻灯片滚动：2
}
},
{
断点：600，
设置：{
幻灯片放映：2，
幻灯片滚动：1
}
},
{
断点：480，
设置：{
幻灯片放映：1，
幻灯片滚动：1
}
}
//现在可以通过添加以下内容在给定断点取消单击：
//设置：“取消单击”
//而不是设置对象
]
}
}
$（'.flickfeed'）.slick（getSliderSettings（））；
$（“.slick slide”）.mouseenter（函数（）{
if（$（this.hasClass（“first”））{
//console.log（'firster'）；
var hoverslide=$（本）；
$（hoverslide.nextAll（）.addClass（'FutureNextSlides'）；
//$（hoverslide.prevAll（）.addClass（'prevslides'）；
}else if（$（this.hasClass（“laster”））{
var hoverslide=$（本）；
$（hoverslide.prevAll（）.addClass（'FuturePrevSlides'）；
}否则{
var hoverslide=$（本）；
$（hoverslide.nextAll（）.addClass（'nextslides'）；
$（hoverslide.prevAll（）.addClass（'prevslides'）；
}
});
$（“.slick slide”）.mouseleave（函数（）{
$（this.parent（）.find（.slick slide”）.removeClass（'nextslides'）；
$（this.parent（）.find（.slick slide”）.removeClass（'prevslides'）；
$（this.parent（）.find（.slick slide”）.removeClass（'FutureNextSlides'）；
$（this.parent（）.find（.slick slide”）.removeClass（'futureprovslides'）；
});
//更改幻灯片时，发现新的第一张幻灯片处于活动状态
$（'.flickfeed'）。on（'afterChange'，函数（事件、当前幻灯片、下一幻灯片）{
var currentfirst=$（this.find（'.slick active'）.first（）；
$（this.find（“.slick slide”）.removeClass（'firster'）；
$（currentfirst）.addClass（'firster'）；
var currentlast=$（this.find（'.slick active'）.last（）；
$（this.find（“.slick slide”）.removeClass（'laster'）；
$（currentlast）.addClass（'laster'）；
});
//在幻灯片初始化中，发现新的第一张幻灯片处于活动状态
});
正文{
背景：#141414；
颜色：#eee；
}
.光滑的轨道
{
显示：flex！重要；
填充：40px 3px；
}
.滑滑梯
{
保证金：1px；
身高：继承！重要；
>div{高度：100%！重要；}
}
按钮。光滑箭头{
字号：0；
线高：0；
位置：绝对位置；
排名：0；
显示：块；
身高：61.8%；
最高：18%；
背景：rgba（0,0,0,5）；
填充：0；
光标：指针；
颜色：透明；
边界：无；
大纲：无；
文本呈现：自动；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
z指数：10；
宽度：2.5vw；
背景重复：无重复；
背景位置：中心；
}
按钮。滑头箭头。滑头下一步{
背景图像：url（“数据：图像/svg+xml，%3Csvg xmlns=”http://www.w3.org/2000/svg'style='width:24px；height:24px'viewBox='024'%3E%3Cpath fill='white'd='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/%3E%3C/svg%3E〕；
右：0px；
}
button.slick-arrow.slick-prev{
背景图像：url（“数据：图像/svg+xml，%3Csvg xmlns=”http://www.w3.org/2000/svg'style='width:24px；height:24px'viewBox='024''%3E%3Cpath fill='white'd='M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z'/%3E%3C/svg%3E'；
左：0px；
}
按钮。光滑-禁用{
不透明度：0！重要；
}
.flickfeed{
不透明度：0；
} 
.斯里克{
不透明度：1；
过渡：不透明度。3秒缓解；
}
.flix父项{溢出：隐藏；}
.flix父母{
位置：相对位置；
z指数：5；
//高度：500px；
}
弗利克斯先生{
位置：相对位置；
z指数：5；
高度：500px；
}
.视频列表滑块{
背景：0；
边界：无；
边界半径：0；
溢出：可见；
}
.花里胡哨的名单{
溢出：可见；
}
.flickfeed.光滑的幻灯片.卡片{
边界半径：0px；
@包括anislow；
//动画延迟：0.5s；
填充顶部：55%；背景大小：封面；背景重复：无重复；边框：0；
}
.滑滑梯{
//过渡延迟：0.5s；
@包括anislow；
&：悬停{
//动画延迟：0.5s；
变换：比例（1.5）；z指数：3；
}
}
.幻灯片{
转换：translateX（-3.95vw）；
}
.nextslides{
转化：translateX（3.95vw）；
}
.下滑道{
变换：translateX（7.9vw）；
}
.幻灯片{
转换：translateX（-7.9vw）；
}
.firster{变换原点：左中！重要；}
.laster{变换原点：中间偏右！重要；}
.flickfeed.card{位置：相对；溢出：隐藏；
.back{位置：