Question

我找到了一个codepen：https://codepen.io/norman_pixelkings/pen/NNbqgG

HTML：

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

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>';
    }
});

如何在HTML中显示数据标题的内容以替换点导航？

我需要获取数据标题的内容并将其显示为HTML。

谢谢：）

Answer 1

您的代码在1.8.0光滑滑块版本上工作正常。不适用于1.9.0版本。

但是，如果您想保留此版本的Slick Slider，则可以在代码中替换以下行：

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

作者

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

在您的codepen上进行了测试，并且可以正常工作。

如何在光滑的滑块中按文字更改点？

1 个答案: