Javascript 如何在滑动滑块中创建自定义箭头以更改悬停时的图像？

我用的是滑头。当我将鼠标悬停在自定义箭头上时，希望它们发生变化

下面是我用来定制滑块中左右箭头的javascript。但是当我将鼠标悬停在prevArrow上时，我希望prevArrow图像被另一个图像替换。同样，当右箭头悬停时，下一行图像将被另一个图像替换

jQuery(document).ready(function($) {
      $('.slider').slick({
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 1,
        prevArrow:"<img class='a-left control-c prev slick-prev' src='https://www.pikpng.com/pngl/m/449-4492390_arrow-to-the-left-png-icon-free-arrow.png'>",
nextArrow:"<img class='a-right control-c next slick-next' src='https://toppng.com/uploads/preview/free-right-arrow-symbol-png-vector-arrow-right-vector-115632158025eetnpo2gn.png'>"
    });
});

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

@Manjuboyz的评论后编辑：下面是我的代码的一个工作示例

jQuery（文档）.ready（函数（$）{
$（'.slider'）。光滑({
速度:500,，
幻灯片放映：3，
幻灯片滚动：1，
前箭头：“，
下一行：“
});
});
.slick prev:悬停{
背景：url(https://images.pexels.com/photos/413195/pexels-photo-413195.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)不要重复！重要的；
}
.滑头下一步：悬停{
背景：url(https://images.pexels.com/photos/413195/pexels-photo-413195.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)不要重复！重要的；
}
这里的问题是：您试图使用css悬停效果更改img标记中的src值。我想我通过添加几个Jquery函数解决了这个问题

<div style="margin:25px;">

<div class="slider" data-slick='{"arrows": true'}>
        <img src="https://images.pexels.com/photos/3052361/pexels-photo-3052361.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
        <img src="https://images.pexels.com/photos/830891/pexels-photo-830891.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
        <img src="https://images.pexels.com/photos/373912/pexels-photo-373912.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
        <img src="https://images.pexels.com/photos/462331/pexels-photo-462331.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
        <img src="https://images.pexels.com/photos/162031/dubai-tower-arab-khalifa-162031.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
  <img src="https://images.pexels.com/photos/290595/pexels-photo-290595.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
  <img src="https://images.pexels.com/photos/1823739/pexels-photo-1823739.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
  <img src="https://images.pexels.com/photos/1769371/pexels-photo-1769371.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
    </div>

</div>



jQuery（文档）.ready（函数（$）{
$（'.slider'）。光滑({
速度:500,，
幻灯片放映：3，
幻灯片滚动：1，
前箭头：“，
下一行：“
});
}); 
$（文档）.ready（函数（）{
$（“#prv”）.hover（函数（）{
$（“#prv”）.attr（“src”https://images.pexels.com/photos/413195/pexels-photo-413195.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
}，函数（）{
$（“#prv”）.attr（“src”https://images.pexels.com/photos/584799/pexels-photo-584799.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
});
$（“#nxt”）.hover（函数（）{
$（“#nxt”）.attr（“src”https://images.pexels.com/photos/413195/pexels-photo-413195.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
}，函数（）{
$（“#nxt”）.attr（“src”https://images.pexels.com/photos/536/road-street-sign-way.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
});
});

您的悬停效果CSS不是必需的
您可以共享html代码吗，或者您可以创建一个片段给我们看吗？我会尝试制作一些东西。问题是我正在研究shopify，所以我所有的html都是html和液体编码的组合。我会尽可能多地去除液体编码。希望它足够有意义。我代表你做了一个片段，你能像你需要的那样重现这个问题吗？我做了，但是我无法保存它，因为有太多的字符。因此，我尝试将javascript作为web链接包含，但现在这给了我一个错误。我想知道为什么，除非你知道一个简单的方法来解决它。我已经解决了：）这就是你想要的@Manjuboyz吗？
<div style="margin:25px;">

<div class="slider" data-slick='{"arrows": true'}>
        <img src="https://images.pexels.com/photos/3052361/pexels-photo-3052361.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
        <img src="https://images.pexels.com/photos/830891/pexels-photo-830891.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
        <img src="https://images.pexels.com/photos/373912/pexels-photo-373912.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
        <img src="https://images.pexels.com/photos/462331/pexels-photo-462331.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
        <img src="https://images.pexels.com/photos/162031/dubai-tower-arab-khalifa-162031.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
  <img src="https://images.pexels.com/photos/290595/pexels-photo-290595.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
  <img src="https://images.pexels.com/photos/1823739/pexels-photo-1823739.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
  <img src="https://images.pexels.com/photos/1769371/pexels-photo-1769371.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
    </div>

</div>

jQuery(document).ready(function($) {
      $('.slider').slick({
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 1,
        prevArrow:"<img class='a-left control-c prev slick-prev' src='https://images.pexels.com/photos/584799/pexels-photo-584799.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' id='prv'>",
nextArrow:"<img class='a-right control-c next slick-next' src='https://images.pexels.com/photos/536/road-street-sign-way.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260' id='nxt'>"
    });
}); 


$(document).ready(function(){
  $("#prv").hover(function(){
    $("#prv").attr("src", "https://images.pexels.com/photos/413195/pexels-photo-413195.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    }, function(){
    $("#prv").attr("src", "https://images.pexels.com/photos/584799/pexels-photo-584799.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  });
  $("#nxt").hover(function(){
    $("#nxt").attr("src", "https://images.pexels.com/photos/413195/pexels-photo-413195.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    }, function(){
    $("#nxt").attr("src", "https://images.pexels.com/photos/536/road-street-sign-way.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  });
});