Custom paging stops working after version 1.8.0

Adding a custom paging stops working after version 1.8.0.

====================================================================

Working CodePen

Working Codepen, but if I change to version 1.8.1 or higher, it stops working.

====================================================================

Steps to reproduce the problem

1. Set up slider as recommended in docs.
2. Add a data-title attribute on the slider items
3. Add customPaging like so: customPaging : function(slider, i) { var title = $(slider.$slides[i]).data('title'); return '<a class="pager__item">'+title+'</a>'; }

====================================================================

What is the expected behaviour?

Dots should get the data-title information add replace the dots.

====================================================================

What is observed behaviour?

“undefined” gets output.

====================================================================

[drdogbot7]

What’s happening seems to be that in recent* versions the target “slide” element is wrapped in 2 additional divs. In earlier versions the “Slick-slide” class was just added directly to the target “slide” element.

In the latest version of Slick Carousel, if you want to access data attributes on the original slide, you just need to traverse the DOM by 2 levels.

So here’s the original example:

customPaging: function(slider, i) {
    var title = $(slider.$slides[i]).data('title');
    return '<a class="pager__item">'+title+'</a>';
}

the fix would be:

  customPaging : function(slider, i) {
        var title = $(slider.$slides[i].children[0].children[0]).data('title');
        return '<a class="pager__item">'+title+'</a>';
}

or in vanilla JS:

  customPaging : function(slider, i) {
        var title = slider.$slides[i].children[0].children[0]).dataset.title;
        return '<a class="pager__item">'+title+'</a>';
}

https://codepen.io/drdogbot7/pen/wVrGmB

• I actually had mixed results with versions 1.8.0 and 1.8.1. I suspect that some of the CDN versions are slightly out of sync with the NPM versions. ¯_(ツ)_/¯

[ulimc]

Hi, this seems to work for me with version 1.9.0:

slideTitle = $(slider.$slides[pageIndex]).find('.slick-slide').data('slide-title');

I have an attribute called “data-slide-title” on the slick-slide and I had to report that text to the bullet button. I found out that an additional <div> is injected for some reason I did not understand and didn’t have time to 😃 So i just called a .find(‘.slick-slide’) function to get the job done.