A codepen I found :

HTML:

<section class="slider">
   <div data-title="title1" data-thumb=".png"><img src=".png"></div>
   <div data-title="title2" data-thumb=".png"><img src=".png"></div>
   <div data-title="title3" data-thumb=".png"><img src=".png"></div>
   <div data-title="title4" data-thumb=".png"><img src=".png"></div>
   <div data-title="title5" data-thumb=".png"><img src=".png"></div>
   <div data-title="title6" data-thumb=".png"><img src=".png"></div>
</section>

CSS:

.slider {
 width: auto;
 margin: 30px 50px 50px;
}

.slick-slide {
 background: #cee5ea;
 color: white;
 padding: 20px 0;
 font-size: 30px;
 font-family: "Arial", "Helvetica";
 text-align: center;
}
.slick-slide img {
 display: inline-block;
}

.slick-prev:before,
.slick-next:before {
 color: black;
}

.slick-dots li {
 width: auto;
}

.pager__item {
 padding: 0 12px;
 display: block;
 border: 1px solid red;
}

.slick-dots {
 bottom: -40px;
}

.slick-slide:nth-child(odd) {
 background: #efdfda;
}

JS (jQuery):

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

How can I display the content of the data-title in HTML to replace the dots navigation?

I need to get the content of the data-title and display it the HTML.

Thanks :)

A codepen I found : https://codepen.io/norman_pixelkings/pen/NNbqgG

HTML:

<section class="slider">
   <div data-title="title1" data-thumb="http://cdn.bulbagarden/upload/e/ec/001MS.png"><img src="http://cdn.bulbagarden/upload/c/c0/Spr_3f_001.png"></div>
   <div data-title="title2" data-thumb="http://cdn.bulbagarden/upload/b/bb/004MS.png"><img src="http://cdn.bulbagarden/upload/e/e9/Spr_3f_004.png"></div>
   <div data-title="title3" data-thumb="http://cdn.bulbagarden/upload/9/92/007MS.png"><img src="http://cdn.bulbagarden/upload/f/f8/Spr_3f_007.png"></div>
   <div data-title="title4" data-thumb="http://cdn.bulbagarden/upload/0/0f/025MS.png"><img src="http://cdn.bulbagarden/upload/5/5b/Spr_3f_025.png"></div>
   <div data-title="title5" data-thumb="http://cdn.bulbagarden/upload/d/de/133MS.png"><img src="http://cdn.bulbagarden/upload/a/a9/Spr_3f_133.png"></div>
   <div data-title="title6" data-thumb="http://cdn.bulbagarden/upload/a/a7/151MS.png"><img src="http://cdn.bulbagarden/upload/3/33/Spr_3f_151.png"></div>
</section>

CSS:

.slider {
 width: auto;
 margin: 30px 50px 50px;
}

.slick-slide {
 background: #cee5ea;
 color: white;
 padding: 20px 0;
 font-size: 30px;
 font-family: "Arial", "Helvetica";
 text-align: center;
}
.slick-slide img {
 display: inline-block;
}

.slick-prev:before,
.slick-next:before {
 color: black;
}

.slick-dots li {
 width: auto;
}

.pager__item {
 padding: 0 12px;
 display: block;
 border: 1px solid red;
}

.slick-dots {
 bottom: -40px;
}

.slick-slide:nth-child(odd) {
 background: #efdfda;
}

JS (jQuery):

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

How can I display the content of the data-title in HTML to replace the dots navigation?

I need to get the content of the data-title and display it the HTML.

Thanks :)

• javascript
• attributes
• slider
• slick.js

1 Answer 1

Your code works fine with 1.8.0 slick slider version. Doesn't work with 1.9.0 version.

But if you want to keep this version of Slick Slider, you can replace this line in your code :

var title = $(slider.$slides[i]).data('title');

by

var title = $(slider.$slides[i]).find('[data-title]').data('title');

Tested on your codepen and works.