How to find the last slide?

Question

JavaScript

Hi, I need to refer to the last slide of slick slider.
There is such a code

$(document).ready(function(){


 $(function carouselSetup() {
   
   var $componentCarousel = $('.menu-content1'),
     $items = $componentCarousel.find('.carousel-item');
        

   
   var $slick = $componentCarousel.slick({
       infinite: false,
       speed: 500,
       draggable: true,
       slidesToShow: 3,
       slidesToScroll: 3,
       prevArrow: '<button type="button" class="slick-prev">prev</button>',
       nextArrow: '<button type="button" class="slick-next">next</button>'
     });


   var $prevButton = $slick.find('.slick-prev');
   var $nextButton = $slick.find('.slick-next');

   $prevButton.hide();

   $slick.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
     //console.log(nextSlide);

     if (nextSlide === 0) {
       $prevButton.hide();
     }
     if (nextSlide === slick.slideCount - 1) {
       $nextButton.hide();
     }
     if (currentSlide === 0) {
       $prevButton.show();
     }
     if (currentSlide === slick.slideCount - 1) {
       $nextButton.show();
     }
   });

 });

  
});

Answer 1

You already know the last

$('.carousel-item').eq($('.carousel-item').length - 1)

Answer 2

If you need to find an element, then a link to it is stored in the el.slick["$slides"] pseudo-array. For example, a link to the last slide:

const slider = document.querySelector('.slider');
const lastIdx = slider.slick["$slides"].length - 1;
const lastSlide = slider.slick["$slides"][lastIdx];