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

Share Improve this question Follow edited May 2, 2020 at 17:28 Richard Dallaway 4,33011 gold badge2929 silver badges3939 bronze badges asked May 25, 2018 at 12:00 Sébastien ImbertSébastien Imbert 2111 silver badge44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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.