How to get data and write them in slick dots, why undefined? https://codepen.io/st-iv/pen/vVzpNW

$(".slider").slick({ dots: true, arrows: false, infinite: false, slidesToShow: 2, slidesToScroll: 2, //autoplay: true, //dots: true customPaging : function(slider, i) { var title = $(slider.$slides[i]).data('title'); return '<a class="pager__item"> '+title+' </a>'; }, });

    1 answer 1

    When such problems appear, I advise you to use the inspector (Chrome - F12).

    As we can see, this plugin generates an additional wrapper in the form of two divs:

    enter image description here

    Therefore, the slider.$slides[i] returns a div class="slick-slide slick-current slick-active" element instead of the element that interests you.

    The solution to the forehead is to take the grandson of this slide:

     var title = $(slider.$slides[i].children[0].children[0]).data("title");