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

Posted

技术标签:

【中文标题】如何在光滑的滑块中创建自定义箭头以在悬停时更改图像?【英文标题】:How do I create custom arrows in slick slider that change image on hover? 【发布时间】:2020-07-31 02:23:15 【问题描述】:

我正在使用光滑的滑块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>

【问题讨论】:

能否也分享一下html代码,或者创建一个sn-p给我们看? 我会尝试制作一些东西。问题是我正在使用shopify,所以我所有的html都是html和液体编码的组合。我会尽可能多地删除液体编码。希望这足以让它有意义。 我代表你做了一个 sn-p,你能像你需要的那样重现这个问题吗? 我做到了,但后来我无法保存它,因为字符太多。因此,我尝试将 javascript 作为 Web 链接包含在内,但这现在给了我一个错误。我试图找出原因,除非你知道一个简单的方法来解决它。 我已经修好了 :) 这就是你想要的 @Manjuboyz 吗? 【参考方案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

【讨论】:

以上是关于如何在光滑的滑块中创建自定义箭头以在悬停时更改图像?的主要内容,如果未能解决你的问题,请参考以下文章

如何获得光滑的滑块以在循环中平滑过渡

光滑的滑块同步 - 断点上的自定义箭头

光滑的滑块箭头在响应模式下表现得像幻灯片

调整窗口大小时,光滑的滑块没有响应

光滑的滑块图像重叠和损坏的按钮

当幻灯片更改时,光滑的滑块会暂停 youtube 视频