Html 平滑的缩略图滑块当前在缩略图上更改焦点也需要悬停

大家好。很好的一天。我尝试了slick slider来制作滑块动画。我想更改悬停在缩略图上的主图像。我想问，这有可能吗？我在codepen链接（）中添加了代码，请检查此链接。提前谢谢。尝试此链接，因为它显示错误，所以我共享我的代码

jQuery（文档）.ready（函数（$）{
$（'.slider for'）。光滑({
幻灯片放映：1，
幻灯片滚动：1，
箭头：错，
是的，
asNavFor:“.滑块导航”
});
$（'.slider nav'）。光滑({
幻灯片放映：6，
幻灯片滚动：1，
asNavFor:“。滑块用于”，
点：错，
焦点选择：正确，
响应：[{
断点：992，
设置：{
垂直：假，
}
},
{
断点：768，
设置：{
垂直：假，
}
},
{
断点：580，
设置：{
垂直：假，
幻灯片放映：3，
}
},
{
断点：380，
设置：{
垂直：假，
幻灯片放映：2，
}
}
]
});
});
你好，是的，您可以将滑动条更改为悬停在缩略图上的滑动条。你可以调用鼠标悬停函数来滑动滑梯。创建一个条件，如果鼠标悬停在平滑导航（缩略图）上，则更改当前活动目标。希望这对你有帮助。我编辑了你的代码


jQuery（文档）.ready（函数（$）{
$（'.slider for'）。光滑({
幻灯片放映：1，
幻灯片滚动：1，
箭头：错，
是的，
asNavFor:“.滑块导航”
});
//将活动类设置为第一张幻灯片
$（'.slider导航滑轨'）.eq（0）.addClass（'slick-active'）；
$（'.slider nav'）。光滑({
幻灯片放映：6，
幻灯片滚动：1，
asNavFor:“。滑块用于”，
点：错，
焦点选择：正确，
响应：[{
断点：992，
设置：{
垂直：假，
}
},
{
断点：768，
设置：{
垂直：假，
}
},
{
断点：580，
设置：{
垂直：假，
幻灯片放映：3，
}
},
{
断点：380，
设置：{
垂直：假，
幻灯片放映：2，
}
}
]
});
$（'.slider nav'）.on（'mouseover'，'.slick slide'，函数（e）{
变量$currTarget=$（e.currentTarget），
index=$currTarget.data（'slick-index'），
slickObj=$（'.slider for'）.slick（'getSlick'）；
slickObj.slickGoTo（索引）；
});
});
.banner slider.slider.slider-for{
最大宽度：100%；
}
.banner slider.slider.slider-nav{
最大宽度：100%；
}
.banner slider.slider.slider-for，
.banner slider.slider.slider-nav{
宽度：100%；
}
.banner slider.slider.slider-for{
填充：0 5px；
}
.横幅滑块.光滑滑块img{
宽度：100%；
}
.横幅滑块.滑块横幅图像{
高度：自动；
宽度：100%；
}
.banner slider.slider.slider-nav{
填充：20px0；
}
.banner slider.slider nav.slick-slide.thumbnail-image.thumbimgimg{
身高：100%；
宽度：100%；
对象匹配：覆盖；
}
.横幅滑块.滑块横幅图像img{
宽度：100%；
高度：350px；
对象匹配：覆盖；
}
.横幅滑块。平滑垂直。平滑滑块：激活，
.横幅滑块.平滑垂直.平滑滑块：聚焦，
.横幅滑块.平滑箭头：悬停，
.横幅滑块.平滑箭头：聚焦{
边界：0；