更改光滑滑块的标题文本

Question

我正在使用 Slick Slider 来制作图片幻灯片。对于每张幻灯片，我还有一个带有数据属性的标题。我希望这些数据的信息会随着幻灯片之外的 div 中的每张幻灯片而改变，但出于任何原因，它只会显示我单击它时存储的第一个数据。

JS

$('.category-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
    var title = $(".title").data("project");
    $(".project").text(title);
});

HTML

这是我的数据说明：

<div class="projectTitle sans-s">
    <p class="title" data-project="<?php echo $project->projecttitle();?>">
    <?php echo $project->projecttitle();?></p>
</div>

每张幻灯片的数据都应显示在此处：

<div class="project"></div>

Answer 1

您应该像这样引用特定于滑块的标题

  $('.category-slider')
   .on('afterChange', function(event, slick, currentSlide, nextSlide){

    var title = $(this).find(".title").data("project");
    $(".project").text(title);
  });