Slick: Custom paging stops working after version 1.8.0

[markushasselryd]

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.

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

[apomili]

Your pen is working fine to me in Win 10 / Chrome (the buttons says title1, 2, 3 etc)

[markushasselryd]

Hi @apomili, yes it does. But if I change the js version to 1.9.0 it stops working. I changed the pen to 1.9.0 now.

[greenpharey]

I'm having the same issue as well. here it is working on v8 https://codepen.io/greenpharey/pen/ZoKGxB but once you change it to use v9 it breaks

[BryanBarrera]

I am experiencing the same issue. 1.9.0 seems to break this.

[markushasselryd]

Does anyone know if there is a fix for this?

[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.

[veremey]

Hey, @kenwheeler this issue make sense.
customPaging doesn't work in 1.9.0
https://codepen.io/greenpharey/pen/ZoKGxB
in example used version 1.8.0

[drdogbot7]

I am having this issue as well using v1.8.0 or later.

Specifically it seems to start with https://github.com/kenwheeler/slick/commit/34612b42641e8fd4250f70666a8da67eb624d002

The issue seems to be specific to data-* attributes which don't seem to be passed to the pager function after 1.7.1

Here's 1.7.1

Here's 1.8.0

FYI, this is just from using console.log in the custom paging function

customPaging: ( el, i ) => {
    console.log(el);
}

[drdogbot7]

This PR fixes the issue #3818, though it's possible there may be other unintended consequences.

Issue:
https://jsfiddle.net/drdogbot7/673w190p/

Fix:
http://jsfiddle.net/drdogbot7/h3b2jvgq/4/

[drdogbot7]

UPDATE: Better solution: https://github.com/kenwheeler/slick/issues/3426#issuecomment-517830508

…and here's a workaround if you want to use data-attributes in a custom pager. Relatively painless. This wouldn't work if you had multiple carousels.

https://jsfiddle.net/drdogbot7/b80cev92/

[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. ¯_(ツ)_/¯