如何获取 Slick 当前显示的图像名称？

Question

我有一个问题可能看起来很简单或很愚蠢，但我对这件事有点陌生所以...

我需要获取轮播中当前显示的图片的图像名称（文件名）（使用 Slick 创建）。有一个轮播一次只显示一张图片，假设包含 7 张图片。

能请教一下吗？

谢谢！

Answer 1

使用 afterChange 事件，您可以在转换完成后立即跟踪活动幻灯片。然后 $(slick.$slides.get(currentSlide)) 给出整个幻灯片元素，我们试图在其中找到图像蚂蚁它的 src 属性。

$(document).ready(function(){
$('.slider').slick({
  dots: true,
  autoplay: true,
  autoplaySpeed: 1000,
  infinite: true,
  speed: 1000,
  slide: 'div',
  cssEase: 'linear'
});

$('.slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
//Here I do split the `src` attribute value because I'm using an absolute path.
// $(slick.$slides.get(currentSlide)) gives the whole slide 
    var CurrentImg=$(slick.$slides.get(currentSlide)).find('img').attr('src').split('/').pop();
console.log(CurrentImg)
});

});

img{
width:200px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="slider">
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Wikipedia-logo_ka.png">Wiki</div>
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/d/de/HTML5_oval_logo.png">Html5</div>
  <div><img src="https://upload.wikimedia.org/wikipedia/fr/b/bb/SoundCloud_logo.png">SoundCloud</div>
</div>

如何获取 Slick 当前显示的图像名称？

How can I get the image name currently being displayed by Slick?

html

jquery

css

slick.js