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

Question

我正在使用光滑的滑块https://kenwheeler.github.io/slick/。当我将鼠标悬停在自定义箭头上时，我希望它们发生变化。

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

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>

我在 CSS 中尝试过类似的东西（见下文），但它不起作用。也许是因为新图像出现在先前图像的后面......？我怎样才能让新图像出现在旧箭头图像的位置？

  .slick-prev:hover {
     background: url(https://images.pexels.com/photos/413195/pexels-photo-413195.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) no-repeat !important;
    }

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

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'>",
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'>"
    });
});

.slick-prev:hover {
background: url(https://images.pexels.com/photos/413195/pexels-photo-413195.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) no-repeat !important;
  }
  
.slick-next:hover {
background: url(https://images.pexels.com/photos/413195/pexels-photo-413195.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) no-repeat !important;
  }

<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<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>

标签： javascriptcssslick.js

Answer 1

这里的问题是：您正在尝试使用 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(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");
  });
});

不需要悬停效果的 CSS