Здравстуйте, столкнулся с такой проблемой решил поменять dots на текст, при помощи функции
customPaging
вывел атрибут слайдера, но он выводит undefind хотя атрибуты указаны прилагаю код
<section class="slider">
<div data-title="title1" data-thumb="http://cdn.bulbagarden.net/upload/e/ec/001MS.png"><img src="http://cdn.bulbagarden.net/upload/c/c0/Spr_3f_001.png"></div>
<div data-title="title2" data-thumb="http://cdn.bulbagarden.net/upload/b/bb/004MS.png"><img src="http://cdn.bulbagarden.net/upload/e/e9/Spr_3f_004.png"></div>
<div data-title="title3" data-thumb="http://cdn.bulbagarden.net/upload/9/92/007MS.png"><img src="http://cdn.bulbagarden.net/upload/f/f8/Spr_3f_007.png"></div>
<div data-title="title4" data-thumb="http://cdn.bulbagarden.net/upload/0/0f/025MS.png"><img src="http://cdn.bulbagarden.net/upload/5/5b/Spr_3f_025.png"></div>
<div data-title="title5" data-thumb="http://cdn.bulbagarden.net/upload/d/de/133MS.png"><img src="http://cdn.bulbagarden.net/upload/a/a9/Spr_3f_133.png"></div>
<div data-title="title6" data-thumb="http://cdn.bulbagarden.net/upload/a/a7/151MS.png"><img src="http://cdn.bulbagarden.net/upload/3/33/Spr_3f_151.png"></div>
</section>
$(".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>';
},
//responsive: [{
// breakpoint: 200,
// settings: {
/// d
// }
//}]
});
Ссылка на кодпен:
кодпен
Буду благодарен за любые советы