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

Question

I've got a question that might seem pretty simple or stupid, but I'm a kind of new to this thing so...

I need to get the image name (filename) of the picture that is currently being displayed in the carousel (created with Slick). There's a carousel showing the only one image at a time and containing let's say 7 images.

Could you please advise?

Thanks!

Answer 1

Using afterChange event, you can track the active slide right after the transition is made. Then $(slick.$slides.get(currentSlide)) gives the whole slide element where we try to find the image ant it's src attribute.

 $(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>