html - 如何获取 Slick 当前显示的图像名称?
问题描述
我有一个看起来很简单或愚蠢的问题,但我对这件事有点陌生,所以......
我需要获取当前正在轮播中显示的图片的图像名称(文件名)(使用 Slick 创建)。有一个轮播一次只显示一张图片,并且包含 7 张图片。
您能否提一些建议?
谢谢!
解决方案
使用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>
推荐阅读
- microsoft-graph-api - 如何以编程方式编写 Azure Web Job 的应用程序设置?
- java - WSDL 文件在哪里寻找给定的 Soap 版本?
- javascript - 如何使组件通用并使其变量可以从外部访问?
- python - Python - 设计一个滑块来控制函数的输入
- javascript - 使用 `keyup` 从我的 `.json' 文件中过滤/搜索已经显示在我的 html 上
- android - 如何在 termux 中更新 Node.js
- algorithm - 如何删除大小为 K 的子数组以最小化数组中的反转次数
- android - java.lang.NullPointerException android.graphics.drawable.DrawableContainer$DrawableContainerState.createAllFutures 在本机反应
- php - SSO 注销和登录问题
- google-cloud-iam - 使用 REST API 生成谷歌云访问令牌不起作用