如何解决如何获取 Slick 当前显示的图像名称?
我的问题可能看起来很简单或很愚蠢,但我对这件事有点陌生,所以...
我需要获取当前在轮播中显示的图片的图像名称(文件名)(使用 Slick 创建)。有一个轮播,一次只显示一张图片,包含 7 张图片。
可以请教一下吗?
谢谢!
解决方法
使用 afterChange
事件,您可以在转换完成后立即跟踪活动幻灯片。然后 $(slick.$slides.get(currentSlide)) 给出整个幻灯片元素,我们试图在其中找到图像 ant 它的 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。